title: How to fetch image from system to load in canvas in html5
body: <p>I am using the following way:-</p>
  
  <p><strong>CODE</strong></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;style&gt;
     body {
       margin: 0px;
        padding: 0px;
     }
     #myCanvas {
       border: 1px solid #9C9898;
     }
    &lt;/style&gt;
   &lt;script&gt;
    window.onload = function() {
      var canvas = document.getElementById("myCanvas");
      var context = canvas.getContext("2d");
      var imageObj = new Image();
  
      imageObj.onload = function() {
        context.drawImage(imageObj, 69, 50);
      };
      imageObj.src = "C:\Images\Demo.jpg";
    };
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;canvas id="myCanvas" width="578" height="400"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>i want to load this image in canvas. Is it right way to pass image URL in imageObj.src ?</p>
  
  <p>or is there any other way to load the image ?</p>
  
  <p><strong>THANKS IN ADVANCE</strong></p>