Last Updated: February 25, 2016
·
762
· 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.

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
Did you know?

JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.

Security insights from Cside