Create a basic drawing web app with JavaScript – Part 3

let redColor = 0;
let greenColor = 0;
let blueColor = 0;

let opacity = 1;
let radius = 50;

let width = canvas.width;
let height = canvas.height;

let x = 75;
let y = 75;

let horizontal = true;
let vertical = true;

let nIntervalID;

document.querySelector(“#redColor“).addEventListener(“change“, (event) => {
let newRedValue = event.target.value;
if (newRedValue >= 0 && newRedValue <= 255) {
redColor = newRedValue;
return;
}

redColor = 0;
});

document.querySelector(“#greenColor“).addEventListener(“change“, (event) => {
let newGreenValue = event.target.value;
if (newGreenValue >= 0 && newGreenValue <= 255) {
greenColor = newGreenValue;
return;
}

greenColor = 0;
});

document.querySelector(“#blueColor“).addEventListener(“change“, (event) => {
let newBlueValue = event.target.value;
if (newBlueValue >= 0 && newBlueValue <= 255) {
blueColor = newBlueValue;
return;
}

blueColor = 0;
});

document.querySelector(“#transparent“).addEventListener(“change“, (event) => {
let newValue = event.target.value;
if (newValue >= 0 && newValue <= 100) {
opacity = (newValue * 1.0) / 100;
return;
}

opacity = 1;
});

document.querySelector(“#radius“).addEventListener(“change“, (event) => {
let newRadiusValue = event.target.value;
radius = newRadiusValue * 100;
});

function createCircle(x, y) {
ctx.fillStyle = `rgba(${redColor}, ${greenColor}, ${blueColor}, ${opacity})`;
ctx.beginPath();
ctx.arc(x % width, y % height, radius, 0, Math.PI * 2, false);
ctx.fill();
}

function updateCircleHorizontalPosition() {
if (horizontal) {
x += 1;
return;
}
}

function updateCircleVerticalPosition() {
if (vertical) {
y += 1;
return;
}
}

function moveCircle() {
ctx.clearRect(0, 0, width, height);
createCircle(x, y);
}

function removeInterval() {
clearInterval(nIntervalID);
nIntervalID = null;
}

document.querySelector(“#horizontal“).addEventListener(“click“, () => {
removeInterval();
nIntervalID = setInterval(() => {
updateCircleHorizontalPosition();
moveCircle();
}, 10);
});

document.querySelector(“#vertical“).addEventListener(“click“, () => {
removeInterval();
nIntervalID = setInterval(() => {
updateCircleVerticalPosition();
moveCircle();
}, 10);
});

document.querySelector(“#stop“).addEventListener(“click“, () => {
removeInterval();
});

document.querySelector(“#clear“).addEventListener(“click“, () => {
removeInterval();
x = 0;
y = 0;
ctx.clearRect(0, 0, width, height);
});