Introduction to Canvas
<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
|Feature||Chrome||Firefox (Gecko)||Internet Explorer||Opera||Safari|
|Feature||Android||BlackBerry||Chrome for mobile||Firefox Mobile (Gecko)||IE Mobile||Opera Mobile||Opera Mini||Safari Mobile|
- 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