Exploring the dynamic world through HTML5 canvas and animated objects

Question

Exploring the dynamic world through HTML5 canvas and animated objects

Today I am exploring HTML 5 canvas and experimenting with moving 3 circles on the canvas. Based on my research, it looks like I need to continuously redraw the circles (perhaps every 60 milliseconds) and clear out the old circle before rendering the new one in its updated position.

Currently, I have a draw() function that displays 3 circles, each in a different color. The goal is to control the movement of each circle individually.

I'm seeking guidance on how to set this up initially and animate each ball effectively.

This is the progress I've made so far:

<html>
<head>
    <title>Ball Demo</title>
    <style type="text/css">
        #ball-canvas {
            border: 1px solid #666;
        }
    </style>
</head>
<body>
    <canvas id="ball-canvas" width="900" height="600"></canvas>
    <script>

        function renderCircle(context, x, y, radius, fill) {
            var strokeWidth = 2
            context.beginPath();
            context.arc(x, y, radius - (2 * strokeWidth), 0, 2 * Math.PI, false);
            context.fillStyle = fill;
            context.fill();
            context.lineWidth = strokeWidth;
            context.strokeStyle = '#666';
            context.stroke();
        }

        function draw() {
        renderCircle(context, radius, canvas.height / 2, radius, 'yellow');
        renderCircle(context, canvas.width / 2, canvas.height / 2, radius, 'blue');
        renderCircle(context, canvas.width - radius , canvas.height / 2, radius, 'red');

        }


        var canvas = document.getElementById('ball-canvas');
        var context = canvas.getContext('2d')
        var radius  = 50;


        setInterval(draw, 1000 / 60);

    </script>
</body>

javascript html canvas html5-canvas

Answer 1

Answer №1

Learn how to manipulate circles on an HTML canvas with this step-by-step guide:

Check out a live demonstration here: http://jsfiddle.net/m1erickson/JQQP9/

First, define each circle as an object:

var circle1={
    x:50,
    y:50,
    radius:25,
}

var circle2={
    x:100,
    y:100,
    radius:25,
}

Add these circles to an array:

var circles=[];

circles.push(circle1);
circles.push(circle2);

Create a function to draw all circles:

This function will clear the canvas and redraw all circles at their current x,y positions:

function draw(){
    context.clearRect(0,0,canvas.width,canvas.height);
    for(var i=0;i<circles.length;i++){
        var c=circles[i];
        context.beginPath();
        context.arc(c.x,c.y,c.radius,0,Math.PI*2);
        context.closePath();
        context.fill();
    }
}

To move the circles, update their x,y coordinates and then redraw them:

circles[0].x+=1;
circles[1].y+=1;
draw();

To add animation, consider using requestAnimationFrame for smoother movement:

var frameCount=0;

animate();

function animate(){
    if(frameCount<160){requestAnimationFrame(animate);}
    circles[0].x+=1;
    circles[1].y+=1;
    draw();
    frameCount++;
}

Answer 2

Learn how to manipulate circles on an HTML canvas with this step-by-step guide:

Check out a live demonstration here: http://jsfiddle.net/m1erickson/JQQP9/

First, define each circle as an object:

var circle1={
    x:50,
    y:50,
    radius:25,
}

var circle2={
    x:100,
    y:100,
    radius:25,
}

Add these circles to an array:

var circles=[];

circles.push(circle1);
circles.push(circle2);

Create a function to draw all circles:

This function will clear the canvas and redraw all circles at their current x,y positions:

function draw(){
    context.clearRect(0,0,canvas.width,canvas.height);
    for(var i=0;i<circles.length;i++){
        var c=circles[i];
        context.beginPath();
        context.arc(c.x,c.y,c.radius,0,Math.PI*2);
        context.closePath();
        context.fill();
    }
}

To move the circles, update their x,y coordinates and then redraw them:

circles[0].x+=1;
circles[1].y+=1;
draw();

To add animation, consider using requestAnimationFrame for smoother movement:

var frameCount=0;

animate();

function animate(){
    if(frameCount<160){requestAnimationFrame(animate);}
    circles[0].x+=1;
    circles[1].y+=1;
    draw();
    frameCount++;
}

Answer 3

Answer №2

If you want to update the canvas in a smooth and efficient way, one common approach is to utilize window.requestAnimationFrame. This function allows for redrawing the canvas every time the browser checks if a screen refresh is necessary. I have made some adjustments to your draw method and initialization code below:

    function draw() {
      // Call requestAnimationFrame with itself as a callback to schedule the next frame
      requestAnimationFrame(draw);

      // Clear the canvas to prevent trails from appearing
      canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);

      // Calculate new circle positions based on current time
      var now = +new Date();
      var halfWidth = canvas.width / 2;
      var maxX = canvas.width - radius;
      var spaceBetween = canvas.width / 3;
      var x1 = (halfWidth + now) % maxX;
      var x2 = (x1 + spaceBetween) % maxX;
      var x3 = (x2 + spaceBetween) % maxX;

      var y = canvas.height / 2;
      renderCircle(context, x1, y, radius, 'yellow');
      renderCircle(context, x2, y, radius, 'blue');
      renderCircle(context, x3, y, radius, 'red');
    }

    var canvas = document.getElementById('ball-canvas');
    var context = canvas.getContext('2d')
    var radius  = 50;

    // Start the animation
    draw();

Answer 4

If you want to update the canvas in a smooth and efficient way, one common approach is to utilize window.requestAnimationFrame. This function allows for redrawing the canvas every time the browser checks if a screen refresh is necessary. I have made some adjustments to your draw method and initialization code below:

    function draw() {
      // Call requestAnimationFrame with itself as a callback to schedule the next frame
      requestAnimationFrame(draw);

      // Clear the canvas to prevent trails from appearing
      canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);

      // Calculate new circle positions based on current time
      var now = +new Date();
      var halfWidth = canvas.width / 2;
      var maxX = canvas.width - radius;
      var spaceBetween = canvas.width / 3;
      var x1 = (halfWidth + now) % maxX;
      var x2 = (x1 + spaceBetween) % maxX;
      var x3 = (x2 + spaceBetween) % maxX;

      var y = canvas.height / 2;
      renderCircle(context, x1, y, radius, 'yellow');
      renderCircle(context, x2, y, radius, 'blue');
      renderCircle(context, x3, y, radius, 'red');
    }

    var canvas = document.getElementById('ball-canvas');
    var context = canvas.getContext('2d')
    var radius  = 50;

    // Start the animation
    draw();

Exploring the dynamic world through HTML5 canvas and animated objects

Answer №1

Answer №2

Similar questions

Is Eval really as bad as they say... What alternative should I consider using instead?

Determine the TR id when a button within a TD element is clicked using JavaScript/jQuery

Obtaining table data and HTML elements using the correct code - Selenium and Python

Having trouble retrieving the data property from the parent component within the child component slot

Are you experiencing issues with modal contents extending beyond the modal on smaller screens?

Tips for properly formatting the sort_by parameter in Cloudinary to avoid errors

Tips for validating a text field in React Material UI depending on the input from another text field

The function history.popstate seems to be malfunctioning, as it is triggered by both the forward and backward navigation buttons in

Substitute this.bindMethod for function component

Using the <li dir="..."> tag can cause list indicators to break

What are the capabilities of Ajax when it comes to utilizing select controls in J

Executing asynchronous promises within an asynchronous promise using the .join() method

The phonegap page redirection is failing, as the 'location' property of the object does not function correctly

Once the data is retrieved and the old image is deleted, attempting to upload the new image still results in the old image being displayed in the Next.js application with React Query

What are the steps to implement background synchronization in place of making fetch requests upon UI changes?

Having trouble with the functionality of my JavaScript slider

Unable to save data in local storage

Arranging divs with HTML and CSS

Incorrect JavaScript switch case usage

The resulting line will consist of the discovered string