Pin Me

An Introduction to the Canvas Element

written by: Matthew Casperson•edited by: Michele McDonough•updated: 5/22/2010

The canvas element, along with some advancements in JavaScript engines, gives web developers the opportunity to create detailed and interactive 2D HTML web pages without any 3rd party plugins. This article introduces you to the canvas element, and describes some of its potential.

  • slide 1 of 3

    JavaScript and the Canvas Element

    HTML started life as a way to format a static page. Animated GIF images and flashing text was about as dynamic as HTML could be. JavaScript changed all that by allowing web pages to be dynamically modified, and many web servies now make use of AJAX to create web pages that give the user a more seamless experience than the standard "click, reload page, click" procedure that is so often involved with standard HTML pages.

    Unfortunately JavaScript is somewhat limited by the functionality of the web browser that hosts it. While you can create and modify any element in a web page, JavaScript doesn't (easily) allow the host web browser to display a new type of object. JavaScript can modify some text, insert an image or resize a table with ease because these element are already supported in HTML. But what if you want to do something fancy, like create a game? At best you'd be looking at a frustrating time spent trying to manipulate standard HTML elements in ways that they were never meant to be used. Or, you would use a plugin like Flash or Silverlight.

    Enter the canvas element. This new HTML element provides a way for JavaScript developers to paint directly onto a web page, without the need for an additional plugin. It was first introduced by Apple in its WebKit framework, and used by the Safari web browser and Dashboard widgets. The canvas element is currently being proposed as part of HTML 5, and is supported now by most web browsers like Chrome, Firefox, Opera and Konqueror. Internet Explorer (at least up to version 8) is the notable exception, although projects like ExplorerCanvas do provide some of the functionality of the canvas element for IE.

    Anyone who has done 2D graphics programming will find the canvas element quite easy to use. You can draw lines, shapes, gradients and even modify individual pixels using functions that are very similar to most other 2D API's. And thanks to the performance of the latest JavaScript engines like Chrome's V8, Firefox's SpiderMonkey and Safari's Nitro creating detailed and interactive web applications is quite feasible.

    This series will show you how to create a simple platformer game using JavaScript and the canvas element. It will cover topics like animation, resource loading, layered rendering, scrolling and interaction. With step by step examples with code and live demos for you to play with you'll be able to master the power of the canvas element for yourself.

    Read more in the Game Development with JavaScript and the Canvas element series.

  • slide 2 of 3

    Next Article in Series

    JavaScript Canvas Demo Read on to Drawing an Image to the Canvas.

    See how to draw to and animate the canvas element, with step by step example code and live demo application.

  • slide 3 of 3

    Additional Resource

    Widgetpad Logo 

    You might also be interested in WidgetPad - Mobile development for web developers.

    WidgetPad aims to give web developers a platform on which to build cross platform mobile apps. Read on to see how it stacks up.

Game Development with Javascript and the canvas element

This series will show you how to create a simple platform game with JavaScript and the new canvas element. With step by step examples, source code and live online demos you can see the power that the canvas element gives to web developers.
  1. An Introduction to the Canvas Element
  2. Drawing an Image to the Canvas with JavaScript
  3. Advanced Image Manipulations with the Canvas Element
  4. Parallax Scrolling with the Canvas Element