DEV Community

Chinwendu Agbaetuo
Chinwendu Agbaetuo

Posted on • Edited on

2 1 1 1 1

Create a basic drawing web app with JavaScript - Part 1

Create a basic drawing application - that draws circles, using a canvas element with a click handler. The handler will monitor clicks on the canvas, triggering a function to draw a circle at the clicked position. Additionally, include input boxes for users to adjust the R, G, and B components of the color, these will need to range from 0 to 255, a slider to adjust the radius of the circle drawn and finally a button to clear the canvas.

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 = 100;

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

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

  redColor = 0;
});

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

  greenColor = 0;
});

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

  blueColor = 0;
});

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

  opacity = 1;
});

// handle radius
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, y, radius, 0, Math.PI * 2, false);
  ctx.fill();
}

canvas.addEventListener("click", (event) => {
  createCircle(event.offsetX, event.offsetY);
});

document.querySelector("#clear").addEventListener("click", () => {
  ctx.clearRect(0, 0, width, height);
});
Enter fullscreen mode Exit fullscreen mode

Result

Continuation
Checkout Part 2

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

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