Cómo utilizar HTML5 <canvas> clip()

Question

Soy nuevo en HTML5 <canvas> y estaba tratando de hacer algo, en realidad dibujar el logotipo PORTAL2 :).

Hasta ahora he conseguido hasta ahora

pero como se puede ver la pierna sobresale de la pared, quiero saber cómo saltar fuera de esa pintura adicional.

Supongo que se puede hacer con la función clip() pero no estoy seguro de cómo usarlo.

Esto es lo que quiero

Este es el código que estoy tratando, también disponible en JS Bin aquí http://jsbin.com/exado5/edit

//function to convert deg to radian 
function acDegToRad(deg) 
{ 
    return deg* (-(Math.PI/180.0));  
} 

//set fill color to gray 
ctx.fillStyle = "rgb(120,120,120)"; 
//save the current state with fillcolor 
ctx.save(); 

//draw 2's base rectangle 
ctx.fillRect(20,200,120,35); 
//bring origin to 2's base 
ctx.translate(20,200); 
//rotate the canvas 35 deg anti-clockwise 
ctx.rotate(acDegToRad(35)); 
//draw 2's slant rectangle 
ctx.fillRect(0,0,100,35); 
//restore the canvas to reset transforms 
ctx.restore(); 
//set stroke color width and draw the 2's top semi circle 
ctx.strokeStyle = "rgb(120,120,120)"; 
ctx.lineWidth = 35; 
ctx.beginPath(); 
ctx.arc(77,135,40,acDegToRad(-40),acDegToRad(180),true); 
ctx.stroke(); 

//reset canvas transforms 
ctx.restore(); 

//change color to blue 
ctx.fillStyle = "rgb(0,160,212)"; 
//save current state of canvas 
ctx.save(); 
//draw long dividing rectangle 
ctx.fillRect(162,20,8,300); 
//draw player head circle 
ctx.beginPath(); 
ctx.arc(225,80,35,acDegToRad(0),acDegToRad(360)); 
ctx.fill(); 

//start new path for tummy :) 
ctx.beginPath(); 
ctx.moveTo(170,90); 
ctx.lineTo(230,140); 
ctx.lineTo(170,210); 
ctx.fill(); 

//start new path for hand 
//set lineCap and lineJoin to "round", blue color 
//for stroke, and width of 25px 
ctx.lineWidth = 25; 
ctx.lineCap = "round"; 
ctx.strokeStyle = "rgb(0,160,212)"; 
ctx.lineJoin = "round"; 
ctx.beginPath(); 
ctx.moveTo(222,150); 
ctx.lineTo(230,190); 
ctx.lineTo(270,220); 
ctx.stroke(); 

//begin new path for drawing leg 
ctx.beginPath(); 
ctx.moveTo(160,210); 
ctx.lineTo(195,260); 
ctx.lineTo(160,290); 
ctx.stroke(); 

por favor ayuda.

Answer 1

añadir lo siguiente:

... 
//reset canvas transforms 
ctx.restore(); 

ctx.beginPath(); 
ctx.moveTo(162, 20); 
ctx.lineTo(162, 320); 
ctx.lineTo(300, 320); 
ctx.lineTo(300, 20); 
ctx.clip(); 

//change color to blue 
ctx.fillStyle = "rgb(0,160,212)"; 
//save current state of canvas 
... 

Answer 2

Cambiar el código y comprobar que

//change color to blue 
ctx.fillStyle = "rgb(0,160,212)"; 
//save current state of canvas 
ctx.save(); 
//draw long dividing rectangle 
ctx.fillRect(157,20,15,300); 
//draw player head circle 
ctx.beginPath(); 
ctx.arc(225,80,35,acDegToRad(0),acDegToRad(360)); 
ctx.fill(); 

//start new path for tummy :) 
ctx.beginPath(); 
ctx.moveTo(170,90); 
ctx.lineTo(230,140); 
ctx.lineTo(170,210); 
ctx.fill(); 

//start new path for hand 
//set lineCap and lineJoin to "round", blue color 
//for stroke, and width of 25px 
ctx.lineWidth = 25; 
ctx.lineCap = "round"; 
ctx.strokeStyle = "rgb(0,160,212)"; 
ctx.lineJoin = "round"; 
ctx.beginPath(); 
ctx.moveTo(222,150); 
ctx.lineTo(230,190); 
ctx.lineTo(270,220); 
ctx.stroke(); 

//begin new path for drawing leg 
ctx.beginPath(); 
ctx.moveTo(170,210); 
ctx.lineTo(200,260); 
ctx.lineTo(170,290); 
ctx.stroke();