Results 1 to 9 of 9
  1. #1

    HTML5 Canvas Animation

    Since I'm relatively new to the board, I'd thought I'd give a little demonstration on the ease of animations on an HTML5 canvas element. Other tutorials show how to draw, I thought I'd touch base on how easy it is to animate.

    What is Canvas :
    Canvas is a (semi-)new feature of modern browsers that allows Javascript to draw and create graphics inside an element.

    What could it be used for :
    Just like Java and Flash, it could be used to make some cool games. Also, someday it could be used to eliminate the need for some unneeded images, therefore reducing bandwidth.

    Learning Curve :
    Easy, if you know a bit of Math and Javascript, you are good to go. Flash game designers should find it a walk in the park.


    #1. The canvas element
    Use this :
    Code:
    <canvas id="canvas" height="300px" width="500px"></canvas>
    and not this :
    Code:
    <canvas id="canvas" style="height:300px; width:500px"></canvas>
    Reason is because it skews the board, a round circle will be wider than normal. If you want it to fit the screen, you'll have to use

    #2. Get the canvas element
    Code:
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    I like to make these global variables, but you can make them local. Don't know what that means, don't worry about it right now.

    #3. Let's Draw!
    Code:
    ctx.beginPath();
    ctx.fillRect(10,10,30,30);
    ctx.closePath();
    This should draw a black square, 10 pixels from the top, 10 pixels from the left, 30px X 30px.

    #4. Let's make it move
    To make it move we have to use a timer and erase the canvas every time (or we will get a smudge mark). For fun, we will create a player object, with an X and Y.
    Code:
    player = new Object();
    player.x = 10;
    player.y = 10;
    setInterval(draw,100);
    
    function draw(){
        canvas.width = canvas.width;
        ctx.beginPath();
        ctx.fillRect(player.x,player.y,30,30);
        ctx.closePath();
        player.x++;
    }
    The first line in the draw() function might be confusing, it is the simplest way (that I know of) of erasing the canvas element.
    At the end, you see that the player.x value gets an increment of 1.

    That is it! I haven't tested the code but it should work. Copy and paste what is below into a HTML file and give it a go.
    Code:
    <!DOCTYPE HTML>
        <head></head>
        <body>
            <canvas id="canvas" height="300px" width="400px" style="border:1px solid #000"></canvas>
        <script>
            player = new Object();
            player.x = 5;
            player.y = 5;
            canvas = document.getElementById("canvas");
            ctx = canvas.getContext("2d");
            
            setInterval(draw,100);
        
            function draw(){
                canvas.width = canvas.width;
                ctx.beginPath();
                ctx.fillRect(player.x,player.y,30,30);
                ctx.closePath();
                player.x++;
    
            }
        </script>
        </body>
    </html>
    Thanks for reading it
    Although a bit basic, you should have the jist of it. With what you have here, your next step could be to add keyboard controls, or maybe have it follow your mouse.

    Good luck in the future to other programmers!
    Professional programming, web hosting and web design Cobourg, Ontario
    Follow us on Twitter

  2. #2
    thank you, good info

  3. #3
    Join Date
    Jun 2011
    Location
    America/Mexico_City
    Posts
    98
    Oh.. nice!
    ⓈⓊⓅⒺⓇⓀⒶⓁⒾⒹ

  4. #4
    Thanks for checking it out!
    Professional programming, web hosting and web design Cobourg, Ontario
    Follow us on Twitter

  5. #5
    Thanks, thatīs really cool. Do you see Java Scripts disappearing completely in a couple of years due to HTML5? I mean, with the whole focus switching to mobile and whatnot.

  6. #6
    Well their a bit of two different things. A lot of HTML5's new features rely on Javascript (web sockets, gamepad api, postmessage etc).

    The only way Javascript will disappear is if PHP, ASP.NET and the other languages that use it for AJAX disappear.

    If anything, I think it'll become more and more used as browsers and computers become faster.
    Professional programming, web hosting and web design Cobourg, Ontario
    Follow us on Twitter

  7. #7
    This is some good info. I have worked a bit with canvas animation and once you get started, it is pretty easy to pick up on the basics. It really does add a lot to a site and there is so much that one can do to make the site look attractive and unique.

  8. #8
    Thanks for this tutorial. I know html5 but I did not use canvas. But now I am interested on canvas. Thanks to you again.

  9. #9
    Join Date
    May 2012
    Location
    Delhi, India
    Posts
    66
    Pretty great for a HTML5 beginner like me.
    All i know is about Audio/Video integration properly now.
    Thanks for the great & simple tutorial.

Similar Threads

  1. Javascript/Canvas gallery
    By Mike Taylor in forum Employment / Job Offers
    Replies: 2
    Last Post: 04-20-2011, 07:20 PM
  2. Canvas Systems emailed me...
    By HOD-Jardin in forum Web Hosting Lounge
    Replies: 6
    Last Post: 02-09-2010, 06:43 PM
  3. Animator vs Animation - For people dealing with animation
    By unity100 in forum Web Hosting Lounge
    Replies: 0
    Last Post: 04-07-2008, 08:56 AM
  4. Deneba's CANVAS 7 Plug-ins (Free)
    By Cosmos75 in forum Web Design and Content
    Replies: 0
    Last Post: 07-13-2004, 10:59 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •