Last Updated: February 25, 2016
·
508
· flurin

Performance in a canvas page background

If you're doing a full-page background in canvas with background: -moz-element() or background: -webkit-canvas() here are some things to consider:

  • Try to pre-render a lot of stuff into separate canvasses
  • If you use images, pre-render them onto a separate canvas before using them. ctx.drawImage(canvas, 0, 0) is way faster than ctx.drawImage(image, 0, 0)
  • Always use integer values when using drawImage as the browser will otherwise try to anti-alias it so it looks like the image is on half a pixel

These are just some things we learned while building the HTML & CSS Advent 2012 background for the 24th.