const canvas = document.getElementById("rainbow");
const context = canvas.getContext("2d");

const resizeCanvas = () => {
	canvas.width = canvas.clientWidth;
	canvas.height = canvas.clientHeight;
};

canvas.onmousemove = (event) => {
	if (event.buttons < 1) return;
	context.fillStyle = "red";
	context.fillRect(event.offsetX, event.offsetY + (0 * 5), 5, 5);
	context.fillStyle = "orange";
	context.fillRect(event.offsetX, event.offsetY + (1 * 5), 5, 5);
	context.fillStyle = "yellow";
	context.fillRect(event.offsetX, event.offsetY + (2 * 5), 5, 5);
	context.fillStyle = "green";
	context.fillRect(event.offsetX, event.offsetY + (3 * 5), 5, 5);
	context.fillStyle = "cyan";
	context.fillRect(event.offsetX, event.offsetY + (4 * 5), 5, 5);
	context.fillStyle = "blue";
	context.fillRect(event.offsetX, event.offsetY + (5 * 5), 5, 5);
	context.fillStyle = "violet";
	context.fillRect(event.offsetX, event.offsetY + (6 * 5), 5, 5);
};

window.onresize = () => resizeCanvas();
document.addEventListener("DOMContentLoaded", resizeCanvas);