This demo shows how to work with several canvases to layer image data. There are four canvas objects with various image data drawn below. The image data has been copied into the thumbnails on the right. These are setup to use jQuery UI Sortable so you can rearrange the layers. Additionally, the slider allows you to adjust the opacity of each layer (I placed the letter M under the canvases to illustrate the opacity better). The "Merge w/ drawImage" button merges the four canvases using drawImage() to create a final image object. The result of the merge is place in the image below. The runtime of the operation is shown to the right of all the buttons. The "Merge w/ ImageData" allows for a different blend mode to be selected and will perform the merge using the ImageData context object. That runtime is also displayed to the right of the buttons. The pixel level blending provides more flexibility but has reduced performance while the canvas drawImage() is much faster but only perform standard blending.