Dec 272010
 

In my previous post I drew a heart shape using the HTML5 canvas. After that I tried my hand at simple animation by making the heart move within constrained boundaries.

After reading quite a bit on Google, the suggested way to animate a shape on a canvas seems to be do continuously keep redrawing the canvas and clearing it. When done on a short enough interval, this gives the illusion of animation. Though I’m not sure of the performance implications of this approach, it works quite well in simpler animation scenarios.

One more thing to change from the previous post is that I had hardcoded all the coordinates for the shape. With continuously changing coordinates in animation, this was no longer possible. So I modified the code to take a reference point X,Y and draw the shape relative to it. For the animation logic these X,Y (which are global variables) are added/ subtracted by smaller values (dx,dy) repeatedly. Since every time the image is drawn relative to reference points we are able to use the same code.

The code is below .

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript">
       var WIDTH = 400;
       var HEIGHT = 450;
        var X = 50;
        var Y = 50;
        var dx = 1;
        var dy = 1;
        var context;

        function init() {
            var drawingCanvas = document.getElementById('drawing');
            // Check the element is in the DOM and the browser supports canvas
            if (drawingCanvas.getContext) {
                context = drawingCanvas.getContext('2d');
                setInterval("draw()", 20);
            }
        }

        function draw() {
            context.clearRect(0, 0, WIDTH,HEIGHT);
            context.beginPath();
            context.lineCap = "round";
            context.lineWidth = 8;
            context.strokeStyle = "red";
            context.fillStyle = "red";
            context.moveTo(X, Y);
            context.quadraticCurveTo(X + 10, Y + 50, X + 75, Y + 100);
            context.quadraticCurveTo(X + 140, Y + 50, X + 150, Y);
            context.quadraticCurveTo(X + 112.5, Y - 50, X + 75, Y);
            context.quadraticCurveTo(X + 37.5, Y - 50, X, Y);
            context.stroke();
            context.fill();
            if (X + 150 + dx >= WIDTH || X + dx <= 0)
                dx = -dx;
            if (Y+ 100 + dy >= HEIGHT || Y + dy <= 0)
                dy = -dy;

            X += dx;
            Y += dy;
        }
    </script>
</head>
<body onload="init()">
<canvas style="border:solid 1px black" id="drawing" width="400" height="450">
</canvas>
</body>
</html>