HTML and CSS Reference
In-Depth Information
//clip the canvas to a 50×50 square starting at 0,0
context.rect(0, 0, 50, 50);
context.clip();
//red circle
context.beginPath();
context.strokeStyle = "red"; //need list of available colors
context.lineWidth = 5;
context.arc(100, 100, 100, (Math.PI/180)*0, (Math.PI/180)*360, false);
//full circle
context.stroke();
context.closePath();
context.restore();
//reclip to the entire canvas
context.beginPath();
context.rect(0, 0, 500, 500);
context.clip();
//draw a blue line that is not clipped
context.beginPath();
context.strokeStyle = "blue"; //need list of available colors
context.lineWidth = 5;
context.arc(100, 100, 50, (Math.PI/180)*0, (Math.PI/180)*360, false);
//full circle
context.stroke();
context.closePath();
}
Figure 2-10. The Canvas clipping region
Example 2-5
first draws a large 200×200 black rectangle onto the canvas. Next, we set
our Canvas clipping region to
rect(0,0,50,50)
. The
clip()
call then clips the canvas
to those specifications. When we draw our full red circle arc, we only see the portion
inside this rectangle. Finally, we set the clipping region back to
rect(0,0,500,500)
and
draw a new blue circle. This time, we can see the entire circle on the canvas.
