How to load local image to html5 canvas?

0 votes
328 views
asked Jan 28, 2014 in HTML5 by joel
Hi all

   How to load local image to html5 canvas?

1 Answer

0 votes
answered Jan 28, 2014 by admin (8,115 points)
<!DOCTYPE HTML>
<html>
<head>
  <style>
   body {
     margin: 0px;
      padding: 0px;
   }
   #myCanvas {
     border: 1px solid #9C9898;
   }
  </style>
 <script>
  window.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var imageObj = new Image();
 
    imageObj.onload = function() {
      context.drawImage(imageObj, 0, 0);
    };
    imageObj.src = "file:///E:/BOX2D/image.jpg";
  };
 
</script>
</head>
<body>
  <canvas id="myCanvas" width="578" height="400"></canvas>
</body>
</html>
...