I wrote various two- and three-dimensional animations for years and am looking into various aspects of the practice beginning here. I took a course in computer graphics during my senior year in college using Microsoft Pascal on first-generation IBM PCs with Hercules graphics cards. The Hercules cards featured a resolution of 720×348 and the individual pixels had an aspect ratio of 2:3 (technically 1:1.55), which meant you had to transform all of your locations if you wanted to draw a square. Writing to pixels in, say, locations 100,100 to 200,200 would give you a rectangle that displayed half again as tall as it was wide. Well, at least this was true on the monochrome monitors available at the time.
Another method we learned was about how pixel were written to the screen. If we wrote pixels in OR mode, a logical OR operation would simply draw over what was already in place, and that was the default mode. If we wrote pixels in XOR mode, a logical XOR operation would invert the desired pixels. This effect could be used in animation by drawing something in XOR mode, then drawing it again in the same spot to completely undo the original draw, and then drawing the thing in a new location. That technique, by the way, was supported by more than just the Hercules graphics card.
With happy memories of green-on-black graphics and this simple animation idea I set out to see if the same techniques would work on the HTML5 canvas object.
It started out well enough. I’ve worked out the drawing, moving, and timing issues in previous exercises and the HTML canvas has the virtue of supporting pixels with a 1:1 aspect ratio (or at least it assumes that modern displays do as much). Replicating the XOR operation turned out to be problematic, however. The canvas element implements a more complicated set of drawing modes and none of them worked the way the old XOR mode did. Indeed, the effects turned out to be rather surprising.
In the demo below I try the undraw-move-draw-wait technique in the various drawing modes supported by the canvas element using the globalCompositeOperation value. Clicking on the button cycles the drawing mode through the eleven modes, the operation of which are explained here, among other places.
As you can see, only a couple of the modes even come close to doing what I want and then only against a white background, or, more properly, against a completely transparent background. When framed on this page the animation often takes on the background color of the WordPress page. Some initial research indicated that the old XOR technique is problematic to the point of effectively not being reproducible. It therefore looks like animation may have to be accomplished by redrawing the whole scene, which is annoying, and brings subtleties of its own.