title: Add image to HTML5 Canvas from a file
body: <p>In HTML5 Canvas I am trying to add and image.
  The line:</p>
  
  <pre><code> imageObj.src = 'file://C:/Users/User/Documents/Image File/image1.jpg';
  </code></pre>
  
  <p>is not correct.
  How do I add a file to HTML5 Canvas Image?</p>
  
  <pre><code>  &lt;canvas id="myCanvas" width="1000" height="1000"&gt;&lt;/canvas&gt;
    &lt;script&gt;
          var canvas = document.getElementById('myCanvas');
          var context = canvas.getContext('2d');
          var centerX = canvas.width / 2;
          var centerY = canvas.height / 2;
          var imageObj = new Image();
          imageObj.src = 'file://C:/Users/User/Documents/Image File/image1.jpg';
          imageObj.onload = function () {
              context.drawImage(imageObj, centerX, centerY);
          };
     &lt;/script&gt;
  </code></pre>