JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="draw" width="800" height="500" style="border: 1px solid black"></canvas>
<button id="red" style="width: 35px; height: 25px; background-color: red;" onclick="context.strokeStyle = red"></button>
<button id="green"></button>
<button id="blue"></button>
<input type="button" onclick="g.lineWidth = 1">

JavaScript

var d = document;
var canv = d.getElementById("draw");
var g = canv.getContext("2d")
var flag = false;

canv.onmousedown = mDown;
canv.onmousemove = mMove;
canv.onmouseup = mUp;
g.lineWidth = 7;


function mDown(e)
{
g.moveTo(e.x - canv.offsetLeft, e.y - canv.offsetTop);
flag = true;
}

function mUp(e)
{
flag = false;
}

function mMove(e)
{
if(flag === true)
{
g.lineTo(e.x - canv.offsetLeft, e.y - canv.offsetTop);
g.stroke();
}
}