Our <canvas> retina boilerplate
<canvas> skeleton boilerplate with
retina support
Pic by citoki0815

This is a handy little boilerplate that I use to start my bare bone canvas projects with, it includes a basic setup(), update() and 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.

Basic features:

  • setup() / update() / draw() workflow
  • High DPI and retina support
  • RequestanimationFrame() loop
  • Recale and resize listener that rescales the canvas accordingly

Drop me a line on twitter if you're using it somewhere!

Written by Thijs Bernolet