JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<canvas id="canvas" width="150" height="150"></canvas>

CSS

canvas {
    border: 1px solid black;
}

JavaScript

function draw() {
    var canvas = document.getElementById("canvas");
    if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect(10, 10, 20, 20);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect(10, 15, 20, 20);

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect(50, 50, 20, 20);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect(70, 70, 20, 20);
        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect(90, 90, 20, 20);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect(110, 110, 20, 20);
    }
}

draw()