Drawing to the canvas

Drawing to the <canvas> programmatically is very straight forward in theory. The methods and properties are easy to use, and are quite consistent between supporting browsers. Direct pixel manipulation is the trickiest part of the API to master, but other than that there is nothing really complicated.

One thing we do find is that our code can very quickly mount up. As soon as we're drawing multiple, complex shapes, and setting various properties, our code can easily run to a few hundred lines or more even for relatively simple drawings. This is especially true when animating the contents of the <canvas>.

Get jQuery 1.4 Animation Techniques Beginner's Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.