Web Graphics, Part 1: The Canvas
- Drawing in a Page
- Understanding the Canvas
- Drawing a Bzier Curve
- Browser Support
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)
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.