DEV Community

Chinwendu Agbaetuo
Chinwendu Agbaetuo

Posted on

1

Create a basic drawing web app with JavaScript - Part 3

Create a circle on a canvas with animation that moves vertically and horizontally, forward and back.

Solution

let canvas = document.querySelector("#canvas");
let ctx = canvas.getContext("2d");

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);
});
Enter fullscreen mode Exit fullscreen mode

Result

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up