title: Draw image with x,y relating to the center point for the image?
body: <p>I'm trying to draw an image at co-ordinate points x,y with x and y being in the center of the image.</p>
  
  <p>I have this code that I found earlier for rotating an image:</p>
  
  <pre><code>function drawImageRot(img,x,y,width,height,deg) {
    //Convert degrees to radian
    var rad = deg * Math.PI / 180;
  
    //Set the origin to the center of the image
    context.translate(x + width / 2, y + height / 2);
  
    //Rotate the canvas around the origin
    context.rotate(rad);
  
    //draw the image
    context.drawImage(img, width / 2 * (-1), height / 2 * (-1), width, height);
  
    //reset the canvas
    context.rotate(rad * ( -1 ) );
    context.translate((x + width / 2) * (-1), (y + height / 2) * (-1));
  }
  </code></pre>
  
  <p>However it seems to draw the image below and to the right? i.e. the x,y co-ordinates relate to the top left corner of the image?</p>