background preloader

Canvas

Facebook Twitter

HTML5 Canvas Element Guide. The HTML5 <canvas> element has a unique history.

HTML5 Canvas Element Guide

Starting out as an Apple creation and dating back to 2004, canvas was eventually added to the official W3C HTML5 spec, becoming one of the most interesting and exciting parts of HTML5. Unfortunately, this element takes a bit of work to understand and, unlike your usual run-of-the-mill HTML elements, requires more than just static markup and styling. Canvas tutorial - MDC. <canvas> is an HTML element which can be used to draw graphics via scripting (usually JavaScript). This can, for instance, be used to draw graphs, combine photos, or create simple (and not so simple) animations. The images on this page show examples of <canvas> implementations which will be created in this tutorial. This tutorial describes how to use the <canvas> element to draw 2D graphics, starting with the basics. The examples provided should give you some clear ideas about what you can do with canvas, and will provide code snippets that may get you started in building your own content.

First introduced in WebKit by Apple for the OS X Dashboard, <canvas> has since been implemented in browsers. Emil’s Chronicle » Canvas in IE. Since Apple’s introduction of canvas earlier this year support for it has been added to both Mozilla and Opera, making it more widespread than, the much older, SVG.

Emil’s Chronicle » Canvas in IE

I suspect that’s largely due to the complexity of the later and the simplicity of canvas. However it still cannot see widespread deployment as it’s not supported by Internet Explorer, which has around 80-90% of the browser market. IE doesn’t support SVG natively either, it does support something called VML though, and it’s been around since the 5.0 days, if I remember correctly. VML does pretty much the same thing as SVG (as far as basic drawing is concerned). Using VML, in combination with behaviors, it should therefor be possible to emulate a subset of SVG or Canvas in IE.