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 thanctx.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.
Written by Flurin Egger
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Canvas
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#