Improving Canvas Performance with Transparency

Question

Drawing images that contain transparency is slow.

Is there any way of just discarding the pixels that contain transparency?

When I draw images that do not contain any transparent pixels, it's really fast.

Answer 1

Yup, you can obtain a context with no alpha support. the slowness is likely coming from the background compositing the browser have to do with the element and each time something is drawn. here's how (notice the option at the end)

var context = canvas.getContext('2d', {alpha:false});

you can still composite transparency locally inside the canvas but the background will always stay opaque. i think most browsers support it but i wouldn't hold onto my hat for ie11 or older.