Canvas How to - Draw image on grid

Question

We would like to know how to draw image on grid.

Answer


<!-- ww  w . j  a  v  a2  s.  c o  m-->
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.6.2.js'></script>
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
    var width = $(window).width();
    var height = $(window).height();
    var c = document.getElementById("a");
    var ctx = c.getContext("2d");
    for (var x = 0.5; x < width; x += 10) {
         ctx.moveTo(x, 0);
         ctx.lineTo(x, height);
    }
    for (var y = 0.5; y < height; y += 10) {
         ctx.moveTo(0, y);
         ctx.lineTo(width, y);
    }
    ctx.strokeStyle = "#eee";
    ctx.stroke();
    var test= new Image();
    test.src = "http://www.java2s.com/style/download.png";
    test.onload = function() {
         ctx.drawImage(test, 0, 0);
    };
});//]]>  
</script>
</head>
<body>
  <canvas id="a" width="300" height="300">Canvas not supported on your browser</canvas>
</body>
</html>

The code above is rendered as follows: