title: JS - Center Image inside canvas element
body: <p>I'm scaling the image down so it fits inside the canvas, the thing I am struggling to do is to then center it inside of the canavas element, does anyone know how this could be done please? Any help would be appreciated</p>
  
  <p><a href="https://jsfiddle.net/n7xL5c37/" rel="noreferrer">https://jsfiddle.net/n7xL5c37/</a></p>
  
  <pre><code>var canvas = document.getElementById('canvas');
  var image = new Image();
      image.src = 'http://placehold.it/300x550';
      image.onload = function () {
          var canvasContext = canvas.getContext('2d');
          var wrh = image.width / image.height;
          var newWidth = canvas.width;
          var newHeight = newWidth / wrh;
          if (newHeight &gt; canvas.height) {
                      newHeight = canvas.height;
              newWidth = newHeight * wrh;
          }
  
          canvasContext.drawImage(image,0,0, newWidth , newHeight);
        };
  </code></pre>