HTML 5 Canvas

HTML 5 is opening all new possibilities to the web games. You don’t need to own the license of flash or other framework anymore. You can simply take benefit of the canvas that HTML 5 is providing you. There is a lot you can do even though it is just beginning with the canvas.

W3C released < canvas > tag with which we can be used for rendering graphs, game graphics, or other visual images. Simply put canvas is an area where you can use javascript to draw the graphics of your choice.

Canvas Tag is Supported on Following Browsers

  • Firefox 3.0+ onwards
  • Safari 3.0+
  • IE 7.0
  • Chrome 3.0+

    • Example Canvas ?

    Code below will create simple canvas that will draw invisible canvas on the page.

    < canvas width= "550" height= "400" >

    To get started with things you can add border to your canvas, fill it with background and can do many other things.

    What can i do with it ?

    You can draw-

  • Particle Systems
  • Shapes
  • Reset the canvas
  • 2D animation
  • 2D Games

    • What about 3D ?

    HTML5 canvas tag doesn’t come up with 3D context. There is no vendor independent API for 3D context so as of now there is no 3D.

    Where to go from here ?

    If you are mozilla or opera user then you check the following resource.

  • Mozilla Developer Center – Canvas Tutorial
  • Opera – HTML 5 Canvas tutorial

    • Is there any book ?

    Yes. You can buy Book from Amazon “HTML 5 Up & Running”.

    Speak Your Mind

    *