Web Graphics, Part 1: The Canvas
- Drawing in a Page
- Understanding the Canvas
- Drawing a Bzier Curve
- Browser Support
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Tim Berners-Lee's WorldWideWeb application supported a small number of elements for marking up text, but no support for images. The well-known <img> tag was first proposed by Marc Andreessen of NCSA back in February 1993.
I joined the web party quite late, in 1994, shortly after the Windows port of Mosaic was released. Back then, I was using a 2400-baud modem scrounged from my father's company (which had since updated to the shiny new 14.4 kilobaud V.32bis standard for the computer that fetched the company's email). By the end of the year, I had switched from Mosaic to the new Netscape Navigator, but both browsers shared one feature: the ability to disable images. This capability was very important on a connection for which a page of text could take several seconds to load.
The Web today is a very different environment, yet the <img> tag remains the most common way of providing images. Recently, three new technologies have started to gain support in browsers that look set to change this situation:
- The <canvas> tag
- Scalable Vector Graphics (SVG)
- WebGL
In this three-part series, I'll take a look at each of these technologies in turn, beginning with the <canvas> tag in this article.
Drawing in a Page
When you load an image with the <img> tag, you get some static data from the server. If the image is an animated GIF, it may cycle through an animation, but this is independent of anything else on the page.
The <canvas> tag is different. When your browser loads a <canvas> tag, it just reserves some space for drawing. Nothing is drawn in that region by default. As the name implies, you get a canvas in which you can draw. The <canvas> tag is very closely tied to JavaScript. Unlike most of the rest of HTML, which uses a declarative model to describe the DOM, the canvas is an imperative-language construct. It's something that you can draw in with imperative code, not something that you can describe in HTML.
If the browser doesn't support the canvas element, it will display the contents of the <canvas> tag. All HTML renderers are supposed to use this fallback for tags that they don't understand. The same thing happens with the <canvas> tag if JavaScript is disabled; even if the browser understands the canvas element, it can't do anything with the canvas without the help of JavaScript.