JSFiddle - React, Tailwind, and code Playground

HTML

<canvas></canvas>
<canvas></canvas>

CSS

html, body {height: 100%;margin: 0;}
canvas:first-child {display: block;width: 100%;height: 100%;}
canvas+canvas {position: absolute;width: 100%;height: 100%;top: 0;left: 0;}

JavaScript

var	canvas = document.querySelector("canvas:first-child"),
	temp = document.querySelector("canvas+canvas"),
	ctx = canvas.getContext("2d"),
	ctxTemp = temp.getContext("2d"),
	posX, posY;


function draw(e){
	var curX = e.clientX - canvas.offsetLeft,
		curY = e.clientY - canvas.offsetTop;
	
    ctx.lineWidth = ctxTemp.lineWidth = 1;

    var r1 = Math.abs(curX-posX)/2,
		r2 = Math.abs(curY-posY)/2,
		r = (r1>r2) ? r1 : r2,
		dX = (curX<posX) ? -r : r,
		dY = (curY<posY) ? -r : r;
	
    ctxTemp.beginPath();
	ctxTemp.clearRect(0, 0, canvas.width, canvas.height);
	ctxTemp.arc(posX+dX, posY+dY, r, 0, 2*Math.PI );
	ctxTemp.stroke();
}

function initDraw(e){
	posX = e.clientX - canvas.offsetLeft;
	posY = e.clientY - canvas.offsetTop;
	ctxTemp.beginPath();
	ctxTemp.moveTo(posX, posY);
	addEventListener('mousemove', draw, false);
}

function endDraw(e){
	removeEventListener('mousemove', draw, false);
	ctxTemp.closePath();
	ctx.drawImage(temp, 0, 0);
	ctxTemp.clearRect(0, 0, canvas.width, canvas.height);
}


temp.addEventListener('mousedown', initDraw, false);
addEventListener('mouseup', endDraw, false);

canvas.width = temp.width = canvas.offsetWidth;
canvas.height = temp.height = canvas.offsetHeight;