const canvas = document.getElementById("draw");

const ctx = canvas.getContext("2d");

let isDrawing = false;

let radius = 10;

let isRadiusUp = true;

let color = 0;

let isColorUp = true;

function change() {

if (isRadiusUp) {

radius += 1;

} else {

radius -= 1;

}

if (isColorUp) {

color += 1;

} else {

color -= 1;

}

if (radius >= 40) {

isRadiusUp = false;

}

if (radius < 4) {

radius = 10;

isRadiusUp = true;

}

if (color >= 250) {

isColorUp = false;

}

if (color <= 0) {

isColorUp = true;

}

}

document.addEventListener("pointerdown", () => {

isDrawing = true;

});

document.addEventListener("pointerup", () => {

isDrawing = false;

});

addEventListener("pointermove", (event) => {

change();

if (isDrawing) {

const x = event.clientX;

const y = event.clientY;

ctx.arc(x, y, radius, 0, 360, true);

ctx.fillStyle = `hsl(${color}, 50%, 50%)`;

ctx.fill();

}

});