<script type="text/javascript">

  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  var image = new Image();

  window.onload = function(){
   canvas.width = 800;
   canvas.height = 800;
   image.src = "02.jpg"; //javascript会自动读取这个图片到image的对象中
   //绘制图片注意必须在图片加载完之后在绘制图片
   image.onload = function(){ //当图片读取成功之后才会被调用
    context.drawImage(image,100,100,400,400,0,0,canvas.width,canvas.height);
   }
  };
 
 </script>