JSFiddle - React, Tailwind, and code Playground

by DiV666

HTML

<canvas id="canvas-draw"></canvas>

CSS

#canvas-draw {
  border: 1px solid black;
  width: 100%;
  height: 300px;
}

JavaScript

var canvas = document.getElementById('canvas-draw');
var ctx = canvas.getContext("2d");

canvas.addEventListener('pointerdown', function (event) {
	event.preventDefault();
	event.stopPropagation();

	drawPoint(event.clientX, event.clientY);

	canvas.addEventListener('pointermove', pointermove, false);

	return false;
}, false);

document.addEventListener('pointerup', function (event) {
	drawPoint(event.clientX, event.clientY);
	canvas.removeEventListener("pointermove", pointermove);
}, false);

function pointermove(event) {
	event.preventDefault();
	event.stopPropagation();

	drawPoint(event.clientX, event.clientY);

	return false;
}

function drawPoint(x, y) {
	ctx.beginPath();
	ctx.arc(x, y, 1, 0, 2 * Math.PI, false);
	ctx.fill();
}