JSFiddle - React, Tailwind, and code Playground

by Artur Vardanyan

JavaScript

var config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    pixelArt: true,
    backgroundColor: '#ff0000',
    scene: {
        preload: preload,
        create: create
    }
};


HTMLCanvasElement.prototype.getContext = function(origFn) {
  return function(type, attributes) {
    if (type === 'webgl') {
      attributes = Object.assign({}, attributes, {
        preserveDrawingBuffer: true,
      });
    }
    return origFn.call(this, type, attributes);
  };
}(HTMLCanvasElement.prototype.getContext);


var game = new Phaser.Game(config);

game.preserveDrawingBuffer = true;

console.log(game.preserveDrawingBuffer )

function preload ()
{
    this.load.atlas('gems', 'assets/tests/columns/gems.png', 'assets/tests/columns/gems.json');
}

function create ()
{
    this.anims.create({ key: 'everything', frames: this.anims.generateFrameNames('gems'), repeat: -1 });

    this.add.sprite(400, 300, 'gems').setScale(4).play('everything');
}


var data = [];
const int = setInterval(() => {
   
    if (data.length === 8) {
        draw()
        clearInterval(int);
    }


    var canvassss = document.querySelector('canvas');
    let base64 = canvassss.toDataURL();
    data.push(base64);

}, 200);


function draw() {
    var canvas = document.createElement('canvas');
    canvas.id = "CursorLayer";
    canvas.width = 800;
    canvas.height = 600;
    canvas.style.zIndex = 8;
    canvas.style.position = "absolute";
    canvas.style.border = "1px solid";
    var body = document.getElementsByTagName("body")[0];
    body.appendChild(canvas);
    const ctx = canvas.getContext('2d');

    const images =[];
    console.log(data)
    data.forEach((base64) => {
         var image = new Image();
           image.src = base64;
           image.onload = function() {
               images.push(image)
               if (images.length === data.length -1) {
                   dddraw(images, ctx)
               }
           }
    })


function...