JSFiddle - React, Tailwind, and code Playground

by Christopher

HTML

<div id="one">
    <canvas id="drawingCanvas" width="500" height="400"></canvas>
</div>

CSS

#one #drawingCanvas {border: 6px dashed black;}

JavaScript

var canvas = document.getElementById("drawingCanvas");
var context = canvas.getContext("2d");

//Draw Path
context.moveTo(50,20);
context.lineTo(100,20);
context.lineWidth=10;
context.strokeStyle="#cd2828";
context.stroke();

// Draw new path
context.beginPath();
context.moveTo(20,50);
context.lineTo(120,300);
context.lineWidth:20;
context.stroke():