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>

Dec 252010
 

The canvas element in HTML5 is akin to a drawingboard on a webpage. It allows dynamic drawing of images, animation through JavaScript. The programming model is relatively simple and easy to learn. I just started playing around with it and tried to draw a heart shape with it.

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript">
        function onload() {
            var drawingCanvas = document.getElementById('drawing');

            // Check the element is in the DOM and the browser supports canvas
            if (drawingCanvas.getContext) {
                var context = drawingCanvas.getContext('2d');
                context.beginPath();
                context.lineCap = "round";
                context.lineWidth = 8;
                context.strokeStyle = "red";
                context.fillStyle = "red";
                context.moveTo(100, 90);
                context.quadraticCurveTo(105,150,200, 215); 
                context.quadraticCurveTo(290, 150,300, 90);
                context.quadraticCurveTo(250, 30, 200, 90);
                context.quadraticCurveTo(150, 30, 100, 90);
                context.stroke();
                context.fill();

            }
        }
    </script>
</head>
<body onload="onload()">
<canvas style="margin:10px" id="drawing" width="500" height="500">
</canvas>
</body>
</html>

The whole shape is called a path. You can draw lines, arcs, curves etc to make up a path and then fill it with a color. Canvas also allows for more advanced stuff like animation etc, but that is fodder for later posts. Below is the demo. The page is available here. (Might not work in a bit older browsers. Use Chrome).