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:
Define the canvas context:
window.onload = function(){ // drawing canvas and context var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");
Draw a spade in the center of the canvas using the
drawSpade()
function that we created in Chapter 2, Shape Drawing and Composites :// draw spade var spadeX = canvas.width / 2; var spadeY = 20; var spadeWidth = 140; var spadeHeight = 200; // draw spade in center of canvas...