Canvas drawing app

by sungsoonz

HTML

<canvas width="500" height="400"></canvas>
<button id="clear">Clear</button>

CSS

canvas {
  background: lightgrey;
  display: block;
}

JavaScript

/** @type {HTMLCanvasElement} */
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const clearBtn = document.getElementById('clear');
let isDown = false;
let currentPos = { x: 0, y: 0 };

function draw() {
	ctx.beginPath();
	ctx.arc(currentPos.x, currentPos.y, 10, 0, Math.PI*2);
  ctx.fillStyle = 'coral';
  ctx.fill();
}

function moveHandler(e) {
	currentPos.x = e.layerX;
  currentPos.y = e.layerY;
  if (isDown) {
  	draw();
  }
}

function upHandler(e) {
	isDown = false;
}

function downHandler(e) {
	isDown = true;
}

function clearCanvas() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
}


clearBtn.addEventListener('click', clearCanvas);
canvas.addEventListener('mousedown', downHandler);
canvas.addEventListener('mouseup', upHandler);
canvas.addEventListener('mousemove', moveHandler);