JSFiddle - React, Tailwind, and code Playground

by Pabbathi Sai Pavan

HTML

<canvas id="canvas" width=400 height=400></canvas>
<canvas id="tempcanvas" width=400 height=400></canvas>

CSS

canvas {position:absolute;left:0;top:0}
#canvas {background:#eef}

JavaScript

var ctx = tempcanvas.getContext('2d'),
    mainctx = canvas.getContext('2d'),
    w = canvas.width,
    h = canvas.height,
    x1,
    y1,
    isDown = false;

ctx.translate(0.5, 0.5);

tempcanvas.onmousedown = function(e) {
    var rect = canvas.getBoundingClientRect();
    x1 = e.clientX - rect.left;
    y1 = e.clientY - rect.top;
    isDown = true;
}
tempcanvas.onmouseup = function() {
    isDown = false;
    mainctx.drawImage(tempcanvas, 0, 0);
    ctx.clearRect(0, 0, w, h);
}
tempcanvas.onmousemove = function(e) {

    if (!isDown) return;
    
    var rect = canvas.getBoundingClientRect(),
        x2 = e.clientX - rect.left,
        y2 = e.clientY - rect.top;
    
    ctx.clearRect(0, 0, w, h);
    drawEllipse(x1, y1, x2, y2);

}

function drawEllipse(x1, y1, x2, y2) {
    var radiusX = (x2 - x1) * 0.5,
        radiusY = (y2 - y1) * 0.5,
        centerX = x1 + radiusX,
        centerY = y1 + radiusY,
        step = 0.01,
        a = step,
        pi2 = Math.PI * 2 - step;
    
    ctx.beginPath();
    ctx.moveTo(x1,y1);

    for(; a < pi2; a += step) {
        ctx.lineTo(x2,y2);
    }
    
    ctx.closePath();
    ctx.strokeStyle = '#000';
    ctx.stroke();
}