JSFiddle - React, Tailwind, and code Playground

by web-nfo.com

HTML

<canvas id="demo" width="600" height="350"></canvas>

CSS

canvas {
    border:1px solid #333;
}

JavaScript

var demo = document.getElementById('demo');
var context = demo.getContext('2d');

var w = demo.width / 2;
var h = demo.height / 2;
var x = w/2;
var y = h/2;


context.fillStyle = "rgba(5,5,5,0.1);";
context.fillRect(x,y, w,h);


context.fillStyle = "#FF0000";
context.fillRect(x-10,y-10, w,h);


context.strokeStyle = "rgba(5,5,5,0.7);";
context.strokeRect(x-60,y-60, w+100,h+100);



context.strokeStyle = "green";
context.lineWidth = 5;

context.beginPath();
context.moveTo(0, h * 2);
context.lineTo(w * 2, 0);
context.stroke();