1.13. Compositing

When you stroke lines, fill regions, draw text, or copy images, you expect the new pixels to be drawn on top of the pixels that are already in the canvas. If you are drawing opaque pixels, then they simply replace the pixels that are already there. If you are drawing with translucent pixels, then the new (“source”) pixel is combined with the old (“destination”) pixel so that the old pixel shows through the new pixel based on how transparent that pixel is.

This process of combining new translucent source pixels with existing destination pixels is called compositing, and the compositing process described above is the default way that the Canvas API combines pixels. You don’t always want compositing to happen, however. Suppose you’ve drawn into a canvas using translucent pixels and now want to make a temporary alteration to the canvas and then restore it to its original state. An easy way to do this is to copy your drawing to an offscreen canvas using drawImage(). Then, when it is time to restore the canvas, you can copy your pixels from the offscreen canvas in which you saved them back to the onscreen canvas. Remember, though, that the pixels you saved were translucent. If compositing is on they won’t fully obscure and erase the temporary drawing you’ve done. In this scenario, you need a way to turn compositing off: to draw the source pixels and ignore the destination pixels regardless of the transparency of the source.