Databases
StackOverflow2013
Postsdbo
POHow to use HTML5 <canvas> clip()
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to use HTML5 <canvas> clip()
    primarykey
    data
    text
    <p>I am new to HTML5 <code>&lt;canvas&gt;</code> and was trying to make something, actually draw the PORTAL2 logo :).</p> <p>Till now I have got it so far</p> <p><img src="https://i.stack.imgur.com/gmQzd.png" alt="enter image description here"></p> <p>but as you can see leg is protruding out of the wall, i want to know how to chip off that extra paint. </p> <p>I guess it can be done with <code>clip()</code> function but I'm not sure how to use it.</p> <p>Here is what i want</p> <p><img src="https://i.stack.imgur.com/NOHUj.jpg" alt="enter image description here"></p> <p>This is the code I'm trying, also available at JS Bin here <a href="http://jsbin.com/exado5/edit" rel="noreferrer">http://jsbin.com/exado5/edit</a></p> <pre><code>//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(); </code></pre> <p>Please help.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USskaffman
    1. USShekhar_Pro
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to use HTML5 <canvas> clip()
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow to use HTML5 <canvas> clip()
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POHow to use HTML5 <canvas> clip()
      1. USDimi Toulakis
      1. VTFavorite
    1. COi) make it blank white vertical line ii) Overlap and near the blue vertical line...
      singulars
      1. POHow to use HTML5 <canvas> clip()
      1. USAnand Thangappan
    2. COummmm.... not sure what you mean.. but when i call clip it also clips the knees :(
      singulars
      1. POHow to use HTML5 <canvas> clip()
      1. USShekhar_Pro
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload