paint.js

const { PI } = Math;

class Toolbar {
	constructor(toolbarId) {
		const element = document.getElementById(toolbarId);
		this.form = element;
		this.value = null;

		this.setValue();

		this.form.addEventListener('change', () => {
			this.setValue();
		});
	}

	setValue() {
		this.value = {};
		for (let item of this.form.elements) {
			if (item instanceof HTMLInputElement) {
				const control = this.form.elements.namedItem(item.name);

				if (control instanceof RadioNodeList) {
					this.value[control[0].name] = control.value;
				} else {
					this.value[control.name] = control.value;
				}

			}
		}
	}
}

const drawCicle = (ctx, x, y, r, color) => {
	ctx.fillStyle = color;
	ctx.beginPath();
	ctx.ellipse(x, y, r, r, 0, 0, 360 * PI);
	ctx.fill();
	ctx.closePath();
}

const drawSquare = (ctx, x, y, size, color) => {
	ctx.fillStyle = color;
	ctx.beginPath();
	ctx.fillRect(x, y, size, size);
	ctx.closePath();
}

const drawTriangle = (ctx, x, y, size, color) => {
	ctx.fillStyle = color;
	ctx.beginPath();
	ctx.moveTo(x, y - size / 2);
	ctx.lineTo(x + size / 2, y + size / 2);
	ctx.lineTo(x - size / 2, y + size / 2);
	ctx.lineTo(x, y - size / 2);
	ctx.fill();
	ctx.closePath();
}

const initDrawer = (canvasId, toolbar) => {
	const canvas = document.getElementById(canvasId);
	const ctx = canvas.getContext('2d');
	const config = toolbar;

	canvas.addEventListener('mousedown', startDrawning);

	function startDrawning() {
		canvas.addEventListener('mousemove', draw);
		canvas.addEventListener('mouseup', endDrawning);
	}

	function draw(event) {
		const x = event.offsetX;
		const y = event.offsetY;
		const { size, color, shape } = config.value;
	
		switch(shape) {
			case 'square': return drawSquare(ctx, x, y, size, color);
			case 'triangle': return drawTriangle(ctx, x, y, size, color);
			case 'circle':
			default: return drawCicle(ctx, x, y, size, color);
		}
	}

	function endDrawning() {
		canvas.removeEventListener('mousemove', draw);
		canvas.removeEventListener('mousedown', startDrawning);
		canvas.addEventListener('mousedown', startDrawning);
	}
}

function main() {
	const toolbar = new Toolbar('toolbar');
	initDrawer('canva', toolbar);
}

document.addEventListener("DOMContentLoaded", function (event) {
	main();
});