JSFiddle - React, Tailwind, and code Playground

by Nick Karnik

HTML

<canvas id="MyCanvas" width="600" height="500">This browser or document mode doesn't support canvas</canvas>

JavaScript

function draw() {
    var canvas = document.getElementById("MyCanvas");
    if (canvas.getContext) { // check for support
        var ctx = canvas.getContext("2d");


        // clear background
        ctx.fillStyle = 'black';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.save();
        //ctx.translate(120,120);
        ctx.fillStyle = "lime";
        ctx.fillRect(100, 100, 100, 100);
        
        ctx.fillStyle = "yellow";
        ctx.font = '32pt Arial';
	    ctx.strokeStyle = 'red';
        ctx.fillText("test", 110, 140);

        //ctx.translate(300, 0);
        //ctx.rotate((Math.PI / 180) * 45); // draws the second rect 45° rotated
        ctx.fillStyle = "rgba(255,0,0,0.5)";
        ctx.fillRect(300, 100, 100, 100);

        ctx.fillStyle = "yellow";
        ctx.font = '32pt Arial';
	    ctx.strokeStyle = 'red';
        ctx.fillText("test", 310, 140);
//ctx.restore();
        
        ctx.translate(400, 100);
        ctx.rotate((Math.PI / 180) * 45); // draws the second rect 45° rotated
        ctx.fillStyle = "blue";
        ctx.fillRect(100, 0, 100, 100);

        ctx.fillStyle = "yellow";
        ctx.font = '32pt Arial';
	    ctx.strokeStyle = 'red';
        ctx.fillText("test", 110, 40);

        ctx.translate(200, 100);
        ctx.rotate((Math.PI / 180) * 90); // draws the second rect 45° rotated
        ctx.fillStyle = "orange";
        ctx.fillRect(100, 0, 100, 100);
        
        ctx.fillStyle = "yellow";
        ctx.font = '32pt Arial';
	    ctx.strokeStyle = 'red';
        ctx.fillText("test", 110, 40);

    }
}

draw();