This is a handy little boilerplate that I use to start my bare bone canvas projects with, it includes a basic
draw() function. It also allows you to create retina canvas elements using the window.devicePixelRatio to determine the context scale in the draw() loop.
You can check the demo by clicking the link on the left.
The eventloop starts with our
setup() wich fires the
update() loop. The
draw() loop is independant from our
update() function because you should only call it when you actually move something visually on your canvas. The draw function itself is split in 2: a
draw() and a
drawExample() function. Our
draw() function is basicly a shell for our
drawExample function, you should type everything in different draw functions and include it after our
context.scale(ratio,ratio) and before
context.restore() to enable high-dpi drawing.
Drop me a line on twitter if you're using it somewhere!