28 lines
1 KiB
JavaScript
28 lines
1 KiB
JavaScript
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);
|