title: Rotate square on its axis in HTML5 Canvas?
body: <p>I want to create a function that rotates a square on its axis.</p>
  
  <pre><code>var halfWidth = canvas.width/2;
  var halfHeight = canvas.height/2;
  
  var x = halfWidth-10;
  var y = halfHeight-10;
  var w = 20;
  var h = 20;
  var deg = 45;
  
  rotate(x, y, w, h, deg);
  
  ctx.fillRect(x, y, w, h);
  </code></pre>
  
  <p>The function:</p>
  
  <pre><code>function rotate(x, y, w, h, deg) {
      // ctx.translate() and ctx.rotate()
      // goes here.
  }
  </code></pre>
  
  <p>How to do this?</p>