I've blogged perviously about HTML5 . I'm personally reading more HTML5 document . HTML5, together with CSS3 and responsive design are the new buzz around web technologies these days . I wante take your attention to HTML Canvas element

Canvas Element

One of the great new features HTML5 has to offer, is the <canvas> element. It gives you the ability to draw shapes dynamically or even manipulate images. <canvas> by itself provides vast possibilities in modern web design and development but it is not a matter to discuss in this article.

Why Do You Need Canvas?

Canvas can be used to represent something visually in your browser. For example:

• Simple diagrams
• Fancy user interfaces
• Animations
• Charts and graphs
• Embedded drawing applications
• Working around CSS limitations

In basic terms it’s a very simple pixel-based drawing API, but used in the right way it can be the building block for some clever stuff.

HTML5 Canvas Start and Stop an Animation Example

       <style>
            body {
                margin: 0px;
                padding: 0px;
            }
            
            #myCanvas {
                border: 1px solid #9C9898;
            }
        </style>
        <script>
            window.requestAnimFrame = (function(callback){
                return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function(callback){
                    window.setTimeout(callback, 1000 / 60);
                };
            })();
            
            function drawRect(myRectangle){
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");
                context.beginPath();
                context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
                
                context.fillStyle = "#8ED6FF";
                context.fill();
                context.lineWidth = myRectangle.borderWidth;
                context.strokeStyle = "black";
                context.stroke();
            }
            
            function animate(lastTime, myRectangle, animProp){
                if (animProp.animate) {
                    var canvas = document.getElementById("myCanvas");
                    var context = canvas.getContext("2d");
                    
                    // update
                    var date = new Date();
                    var time = date.getTime();
                    var timeDiff = time - lastTime;
                    var linearSpeed = 100;
                    // pixels / second
                    var linearDistEachFrame = linearSpeed * timeDiff / 1000;
                    var currentX = myRectangle.x;
                    
                    if (currentX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) {
                        var newX = currentX + linearDistEachFrame;
                        myRectangle.x = newX;
                    }
                    lastTime = time;
                    
                    // clear
                    context.clearRect(0, 0, canvas.width, canvas.height);
                    
                    // draw
                    drawRect(myRectangle);
                    
                    // request new frame
                    requestAnimFrame(function(){
                        animate(lastTime, myRectangle, animProp);
                    });
                }
            }
            
            window.onload = function(){
                var myRectangle = {
                    x: 0,
                    y: 50,
                    width: 100,
                    height: 50,
                    borderWidth: 5
                };
                
                /*
                 * make the animation properties an object
                 * so that it can be modified by reference
                 * from an event
                 */
                var animProp = {
                    animate: false
                };
                
                // add click listener to canvas
                document.getElementById("myCanvas").addEventListener("click", function(){
                    if (animProp.animate) {
                        animProp.animate = false;
                    }
                    else {
                        animProp.animate = true;
                        var date = new Date();
                        var time = date.getTime();
                        animate(time, myRectangle, animProp);
                    }
                });
                
                drawRect(myRectangle);
            };
        </script>
    </head>

        <canvas id="myCanvas" width="578" height="200">
        </canvas>

Last modified on Monday, 12 December 2011 18:37