HTML5 Canvas Cookbook

Copying and pasting sections of the canvas

In this recipe, we'll cover yet another interesting usage of the drawImage() method—copying sections of the canvas. First, we'll draw a spade in the center of the canvas, then we'll copy the right side of the spade and then paste it to the left, and then we'll copy the left side of the spade and then paste it to the right.

Follow these steps to draw a spade in the center of the canvas and then copy-and-paste sections of the shape back onto the canvas:

How to do it...

1. Define the canvas context:

   window.onload = function(){ // drawing canvas and context var canvas = document.getElementById("myCanvas"); var ...