Edit Question - KnowledgeHub

Title Body

I am new to HTML5 <canvas> and was trying to make something, actually draw the PORTAL2 logo :). Till now I have got it so far but as you can see leg is protruding out of the wall, i want to know how to chip off that extra paint. I guess it can be done with clip() function but I'm not sure how to use it. Here is what i want This is the code I'm trying, also available at JS Bin here 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.lineWi

Tags (comma-separated) Cancel