title: Draw a Play button on canvas in javascript - triangle in a circle
body: <p>So I'm creating a simple userscript for me - I want to draw a play button over shaded version of any GIF image on the site to have them only played when I want to.</p>
  
  <p>I have inspired myself <a href="https://stackoverflow.com/a/4276742/607407">here</a>. To make the whole thing nice, I'm drawing a green circle over the animation. This is my intended effect (I really wonder if once can make some shapes in GIMP):</p>
  
  <p><img src="https://i.stack.imgur.com/nG6Th.png" alt="paused animation (created in gimp)"></p>
  
  <p>And this is what I currently have:</p>
  
  <p><img src="https://i.stack.imgur.com/f6bIw.png" alt="paused cleese"></p>
  
  <p><sup>The Cleese ironic face animation comes from this <a href="http://replygif.net/746" rel="nofollow noreferrer">GIF portal</a></sup></p>
  
  <p>I made a fiddle of my current <a href="http://jsfiddle.net/Darker/KNAGK/1/" rel="nofollow noreferrer">GIF pauser userscript</a>.</p>
  
  <p>The critical code for printing the circle:</p>
  
  <pre><code>//Assume these variables
  var ctx = canvas context (2d)
  var w = canvas width
  var h = canvas height
  //The code:
  ctx.beginPath();
  //I'm making sure the circle will always fit - therefore Math.min
  ctx.arc(w/2, h/2, Math.min(60, w/2-20, h/2-20), 0, 2 * Math.PI, false);
  ctx.fillStyle = 'rgba(0,180,0,0.5)';
  ctx.fill();
  ctx.lineWidth = 1;
  ctx.strokeStyle = 'red';
  ctx.stroke();
  ctx.closePath();
  </code></pre>
  
  <p>I hope it's clear that the triangle must always fit into the circle (size of which may vary). It must have the vertical line a little bit shorter then the other two, which must be of equal length.</p>
  
  <p>I'm totally not interested in any existing GIF pausing libraries. Keep in mind that the question is about the triangle, not the GIFs.</p>