Home/ Questions/Q 7963377
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T05:35:42+00:00

I want to animate a ball using html5 and i implemented this small script

  • 0

I want to animate a ball using html5 and i implemented this small script . However, I cannot see any animation .. How do I fix this ?

<html>
    <head>
        <meta charset="utf-8">
        <script>
            canvas = document.getElementById("canvas");         
            window.onload=function(){
            if (document.createElement("canvas").getContext){
                //alert("browser supports canvas");
                //console.log(document.getElementById("canvas").getContext);
                canvas = document.getElementById("canvas");
                shape = new shapes();
                shape.drawball(canvas,100,"red");




                }
            };


function shapes(){
    this.drawtriangle = function(canvas){
        triangles = new triangle(0,0,0,200,200,200);
        triangles.draw(canvas.getContext('2d'));    
    }

    this.drawball = function(canvas,radius,color) {
        ball = new Ball(radius,color);
        ball.draw(canvas.getContext('2d'),canvas);
    }
}


function coordinates(x1,y1){
    this.x = x1;
    this.y = y1;
}





function angle(angle,speed){
    this.angle = angle;
    this.speed = speed;
}

function Ball(radius,color){
    this.origin = new coordinates(100,100);
    this.radius = (radius === "undefined" ) ? 40 : radius;
    this.color = (color === "undefined") ? red : color;
    this.rotation = 0;
    this.index  = 0;
    this.angles = new angle(0,0.2);
}

Ball.prototype.draw = function(context,canvas){

    context.fillStyle = this.color;
    context.strokeStyle = "blue";
    context.rotate(this.rotation);
    context.beginPath();
        context.arc(this.origin.x,this.origin.y,this.radius,0,(Math.PI*2),true)
    context.closePath();
    context.fill();
    context.stroke();
    this.animate(context,canvas);
}

Ball.prototype.animate = function(context,canvas){
        if (this.angles.angle < 1){
context.clearRect(0,0,1000,1000);
        console.log("Animating ... ");  
        this.origin.x = this.origin.x + 10; 
        this.origin.y = this.origin.y + 10; 
        this.angles.angle = this.angles.angle + this.angles.speed;
        window.requestAnimationFrame(this.draw(context));



    }
}


        </script>
        <style>

            body {
                background-color: #bbb;
                }       
            #canvas {
                background-color: #fff;
            }
        </style>
    </head>

    <body>
        <canvas id="canvas" width="1000px" height="1000px">
            Your browser dows bot suppoet canvas

        </canvas>


    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your call to requestAnimationFrame() is not passing a callback, it’s executing a function and passing its return value which is undefined. I would suggest you change this:

    Ball.prototype.animate = function(context,canvas) {
    if (this.angles.angle < 1) {
        context.clearRect(0,0,1000,1000);
        console.log("Animating ... ");  
        this.origin.x = this.origin.x + 10; 
        this.origin.y = this.origin.y + 10; 
        this.angles.angle = this.angles.angle + this.angles.speed;
        window.requestAnimationFrame(this.draw(context));
    }
}

    to this:

    Ball.prototype.animate = function(context,canvas) {
    if (this.angles.angle < 1) {
        context.clearRect(0,0,1000,1000);
        console.log("Animating ... ");  
        this.origin.x = this.origin.x + 10; 
        this.origin.y = this.origin.y + 10; 
        this.angles.angle = this.angles.angle + this.angles.speed;
        var self = this;
        window.requestAnimationFrame(function() {self.draw(context)});
    }
}

    so that you pass an appropriate callback function to requestAnimationFrame().

    Now that you’ve included all the code, here is another issue. You can’t do this:

    canvas = document.getElementById("canvas");

    in javascript in the head tag because the DOM is not yet loaded so it will not find that object. You must do that only when the DOM has been loaded either by waiting for an event that signifies the DOM has been loaded or by running the javascript at the every end of the <body> section AFTER all DOM elements.

    Then, thirdly, you have to use the browser-specific form of requestAnimationFrame since each browser may have it’s own prefix. I used this code:

    var reqestAnimationFrame = 
    window.requestAnimationFrame ||
    window.mozRequestAnimationFrame || 
    window.msRequestAnimationFrame ||
    window.webkitRequestAnimationFrame;

    When I put your script into a jsFiddle and make the above changes, what I find is that the animation runs so quickly that it isn’t seen. Your code will need to add a time element to it so that the animation runs over a particular time period. Usually this is done by defining a duration for the animation and at each animation step, you scale the position of the animation based on what percentage of the duration has elapsed.

    Here’s an example of a time-based animation using requestAnimationFrame: http://jsfiddle.net/jfriend00/nRE7S/

    • 0