The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.
Introduction to Canvas
This article is Almost Ready.
<canvas> was first introduced by Apple for the Mac OS X Dashboard and later implemented in Safari and Google Chrome. Gecko 1.8-based browsers, such as Firefox 1.5, also support this element. The
<canvas> element is part of HTML5.
This tutorial describes how to implement the
<canvas> element in your HTML pages. The examples provided should give you some clear ideas what you can do with <canvas> and can be used to start building your own implementations.
Before you start
<canvas> element isn't supported in some older browsers, but is supported in Chrome 4 and later, Firefox 1.5 and later, Internet Explorer 9 and later, Opera 9 and later, and Safari 3.1 and later.
In this tutorial
- Basic usage
- Drawing shapes
- Using images
- Applying styles and colors
- Basic animations
- Optimizing the canvas
- Introduction to Canvas
Portions of this content copyright 2012 Mozilla Contributors. This article contains work licensed under the Creative Commons Attribution-Sharealike License v2.5 or later. The original work is available at Mozilla Developer Network: Article