Creating a circular shape with a radius that can be adjusted

Question

Creating a circular shape with a radius that can be adjusted

I'm trying to create an expanding bubble-like circle of various colors when clicked on a blank page. The circle should continue increasing in size each time it is clicked, only stopping when the mouse click is released. I am looking to use HTML, CSS, and JS for this effect. Any suggestions on how I can achieve this?

javascript html css

Answer 1

Answer №1

One way to create a circular animation on a webpage is by utilizing the canvas element along with the getContext('2d') method. Below is a breakdown of how you can achieve this effect:

// Access canvas element
const canvas = document.getElementById('circle');
// Initialize canvas context if available
const ctx = canvas?.getContext ? canvas.getContext('2d') : null;

// Set initial radius and modify the radius
let R = 0;
let modR = 0;

// Function to draw the circle
const draw = (ctx, mod) => {
    // Check if canvas context is properly initialized
    // Display error message and return if not
    if(!ctx) return console.error("Can't get canvas context");
    
    // Stop the animation if the modification falls within certain bounds
    if(
        mod == "inc" && modR <= R ||
        mod == "dec" && modR >= R
    ) return;

    // Increment/decrement the radius by 0.5 units
    // Adjust this value to alter animation speed
    if(mod == "inc") R += 0.5;
    if(mod == "dec") R -= 0.5;

    // Calculate position
    let X = canvas.width / 2;
    let Y = canvas.height / 2;

    // Clear previous circle
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw new circle
    ctx.beginPath();
    ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
    ctx.fillStyle = '#FF0000';
    ctx.fill();

    // Attempt to animate resizing
    requestAnimationFrame(() => draw(ctx, mod));
}

// Function to increase the circle size
const inc = r => {
    // Ensure the enlarged circle fits within the canvas area
    // Return if it exceeds the limits
    if(canvas?.width && modR * 2 >= canvas.width) return;

    // Increase the total radius
    modR += r;

    // Update circle size with increase mode
    draw(ctx, "inc");
}

// Function to decrease the circle size
const dec = r => {
    // Ensure the reduced circle size is not too small
    // Return if it goes below a certain threshold
    if(modR * 2 <= 10) return;

    // Decrease the total radius
    modR -= r;

    // Update circle size with decrease mode
    draw(ctx, "dec");
}

body {
    text-align: center;
}

<html>
  <head>
    <meta charset=utf-8 />
    <title>Draw a circle</title>
  </head>
  <body onload="inc(5);">
    <canvas id="circle" width="150" height="150"></canvas>
    <div class="btn">
      <button onClick="inc(5);">Increase</button>
      <button onClick="dec(5);">Decrease</button>
    </div>
  </body>
</html>

Answer 2

One way to create a circular animation on a webpage is by utilizing the canvas element along with the getContext('2d') method. Below is a breakdown of how you can achieve this effect:

// Access canvas element
const canvas = document.getElementById('circle');
// Initialize canvas context if available
const ctx = canvas?.getContext ? canvas.getContext('2d') : null;

// Set initial radius and modify the radius
let R = 0;
let modR = 0;

// Function to draw the circle
const draw = (ctx, mod) => {
    // Check if canvas context is properly initialized
    // Display error message and return if not
    if(!ctx) return console.error("Can't get canvas context");
    
    // Stop the animation if the modification falls within certain bounds
    if(
        mod == "inc" && modR <= R ||
        mod == "dec" && modR >= R
    ) return;

    // Increment/decrement the radius by 0.5 units
    // Adjust this value to alter animation speed
    if(mod == "inc") R += 0.5;
    if(mod == "dec") R -= 0.5;

    // Calculate position
    let X = canvas.width / 2;
    let Y = canvas.height / 2;

    // Clear previous circle
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw new circle
    ctx.beginPath();
    ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
    ctx.fillStyle = '#FF0000';
    ctx.fill();

    // Attempt to animate resizing
    requestAnimationFrame(() => draw(ctx, mod));
}

// Function to increase the circle size
const inc = r => {
    // Ensure the enlarged circle fits within the canvas area
    // Return if it exceeds the limits
    if(canvas?.width && modR * 2 >= canvas.width) return;

    // Increase the total radius
    modR += r;

    // Update circle size with increase mode
    draw(ctx, "inc");
}

// Function to decrease the circle size
const dec = r => {
    // Ensure the reduced circle size is not too small
    // Return if it goes below a certain threshold
    if(modR * 2 <= 10) return;

    // Decrease the total radius
    modR -= r;

    // Update circle size with decrease mode
    draw(ctx, "dec");
}

body {
    text-align: center;
}

<html>
  <head>
    <meta charset=utf-8 />
    <title>Draw a circle</title>
  </head>
  <body onload="inc(5);">
    <canvas id="circle" width="150" height="150"></canvas>
    <div class="btn">
      <button onClick="inc(5);">Increase</button>
      <button onClick="dec(5);">Decrease</button>
    </div>
  </body>
</html>

Creating a circular shape with a radius that can be adjusted

Answer №1

Similar questions

Is there a way to update the background image of a div element through a JavaScript file within a react component?

Issue encountered with AJAX request using JavaScript and Express

The XML information vanished during the transformation into JSON format

The transition from ExtJS 4 to ExtJS 5: A comprehensive guide

Executing certain test suites with defined capabilities in Protractor

Utilizing util.format to enclose every string within an array with double quotation marks

Comprehending the positioning of elements enclosed within a parent <div> tag

There are no markers or popups currently displayed on the map

Troubleshooting the issue of "Mismatched transaction number*" in MongoDB and Node.js

Pagination does not refresh when conducting a search

Checkbox acts like radio buttons in JavaScript

Content on the right floating underneath content on the left

Using DraftJS to swap text while preserving formatting

Using $stateParams injection for unit testing Angular applications with Karma

Is it possible to utilize Vue's splice method within a forEach loop in order to delete multiple elements at

Issues with Swiper functionality in Jquery Mobile

Expanding the MatBottomSheet's Width: A Guide

Exploring HTML Data with Python String Manipulation

Can someone guide me on the proper implementation of the 'useEffect' hook in React version 18?

When elements are arranged side by side without using floats, the alignment at the top is not correct