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
drawImageas 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
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
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#