JSFiddle - React, Tailwind, and code Playground

by sszilvasi

HTML

<canvas id="canvas" width="120" height="100">
   This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

CSS

body {
  background-color: #444444;
}

canvas {
    border: 2px solid red;
}

JavaScript

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext("2d");

ctx.lineWidth = 1;
ctx.moveTo(20, 20);
ctx.lineTo(100, 20);

/* ctx.fillStyle = "#999";
ctx.beginPath();
ctx.arc(100,100,75,0,2*Math.PI);
ctx.fill(); */

ctx.fillStyle = "orange";
//ctx.strokeWidth(2.0);
ctx.strokeRect(20,20,60,60);
ctx.fillRect(20,20,50,50);

ctx.clearRect(30, 30, 40, 40);