Add a Canvas example?

[bryanbraun]

I'm a bit on the fence about this one because I picture it as being 95% the same as the "Vanilla Javascript" technique, the only difference being that the position is applied to a canvas instead of an html element.

It being so similar seems to go against the no "slight variations on existing techniques" principle in the Contribution guidelines, but I'm open to suggestions. Anybody have thoughts?

[tigt]

One change that would need to happen is "erasing" the ball's previous position. If you want to make it noticeably different, it could use the "offscreen <canvas> buffer" technique, which would be overkill for something this simple, but definitely an existing method.

[bryanbraun]

Ok, I think I'm leaning towards adding it then. Let's plan on putting together a code snippet and dropping it in this issue so I can take a look before adding it to the site.

[tigt]

Example from http://blog.bob.sh/2012/12/double-buffering-with-html-5-canvas.html

/* Prepare your canvas */
mainCanvas = $('#myCanvas');
offscreenCanvas = document.createElement('canvas');

/* Make sure your offscreen size matches your on screen 
 * size */
offscreenCanvas.width = mainCanvas.width;
offscreenCanvas.height = mainCanvas.height;

/* Do some drawing on the offscreen canvas */
ctxOffscreen = offscreenCanvas.getContext('2d');
ctxOffscreen.strokeRect(0, 0, 10, 10);

/* Now flip the offscreen canvas to the onscreen 
 * one */
ctxMain = mainCanvas.getContext('2d');
ctxMain.drawImage(offscreenCanvas, 0, 0);