title: Canvas figures moves to the right side
body: <p>Here is the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    var canvas = $("#canvas")[0];
    var context = canvas.getContext("2d");
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
    polygon(context, 120, 120, 50, 12);
    context.stroke();
  })
  
  function polygon(ctx, x, y, radius, sides) {
    if (sides &lt; 3) return;
    var a = ((Math.PI * 2) / sides);
    ctx.beginPath();
    ctx.translate(x, y);
    ctx.moveTo(radius, 0);
    for (var i = 1; i &lt; sides; i++) {
      ctx.lineTo(radius * Math.cos(a * i), radius * Math.sin(a * i));
    }
    ctx.closePath();
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;canvas id="canvas"&gt;OOPS.. Upgrade your Browser&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This code works fine. BUT each of my polgon appears at wrong place. For example I call </p>
  
  <pre><code>polygon(context, 120,120,50,12);
  </code></pre>
  
  <p>and</p>
  
  <pre><code>polygon(context, 120,220,50,12);
  </code></pre>
  
  <p>and the second polygon appears at <code>x=220, y=220</code></p>
  
  <p>I mean, they moves in the right side, but they should appear one under another with the same <code>x</code> coordinates.</p>