JSFiddle - React, Tailwind, and code Playground

by David Iglesias

HTML

<canvas id="myDrawing" width="512" height="512">
            <p>Your browser doesn't support canvas.</p>
        </canvas>

JavaScript

var x; //drawing context
var width;
var height;
var fg;
var buffer

    var drawingCanvas = document.getElementById('myDrawing');
    // Check the element is in the DOM and the browser supports canvas
    if(drawingCanvas && drawingCanvas.getContext) {
        // Initaliase a 2-dimensional drawing context
        x = drawingCanvas.getContext('2d');
        width = x.canvas.width;
        height = x.canvas.height;

        // grey box grid for transparency testing
        x.fillStyle = '#ccc';
        x.fillRect(0,0,width,height);
        x.fillStyle = '#eee';
        var i,j;
        for (i=0; i<100; i++){
            for (j=0; j<100; j++){
                if ((i+j)%2==0){
                    x.fillRect(16*i,16*j,16,16);
                }
            }
        }

        fg = new Image();
        fg.src =...