智商不够用啊这写代码成体力活了,求解救.该如何解决 _JavaScript

智商不够用啊,这写代码成体力活了,求解救.
我就像搞一个7*7的格子,这代码量也太大了,求精减......

[html文件]
<!DOCTYPE html>
<html>
<head><title>javascript</title>
<script type="text/javascript" src = "xxxx.js"></script>
<meat http-equiv="Cache-Control" Content="no-cache"/>
</head>
<body onload="draw();">
<canvas id="canvas" width="800" height="800"></canvas>
</body>
</html>

[javascript文件]
function draw(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var img=new Image();
img.src="0001.jpg";
img.onload=function(){
context.drawImage(img,21,21);
context.drawImage(img,135,21);
context.drawImage(img,249,21);
context.drawImage(img,363,21);
context.drawImage(img,477,21);
context.drawImage(img,596,21);
context.drawImage(img,705,21);
context.drawImage(img,21,135);
context.drawImage(img,135,135);
context.drawImage(img,249,135);
context.drawImage(img,363,135);
context.drawImage(img,477,135);
context.drawImage(img,596,135);
context.drawImage(img,705,135);
context.drawImage(img,21,249);
context.drawImage(img,135,249);
context.drawImage(img,249,249);
context.drawImage(img,363,249);
context.drawImage(img,477,249);
context.drawImage(img,596,249);
context.drawImage(img,705,249);
context.drawImage(img,21,363);
context.drawImage(img,135,363);
context.drawImage(img,249,363);
context.drawImage(img,363,363);
context.drawImage(img,477,363);
context.drawImage(img,596,363);
context.drawImage(img,705,363);
context.drawImage(img,21,477);
context.drawImage(img,135,477);
context.drawImage(img,249,477);
context.drawImage(img,363,477);
context.drawImage(img,477,477);
context.drawImage(img,596,477);
context.drawImage(img,705,477);
context.drawImage(img,21,596);
context.drawImage(img,135,596);
context.drawImage(img,249,596);
context.drawImage(img,363,596);
context.drawImage(img,477,596);
context.drawImage(img,596,596);
context.drawImage(img,705,596);
context.drawImage(img,21,705);
context.drawImage(img,135,705);
context.drawImage(img,249,705);
context.drawImage(img,363,705);
context.drawImage(img,477,705);
context.drawImage(img,596,705);
context.drawImage(img,705,705);
}
}

------解决方案--------------------

JScript code


img.onload=function(){
  for (var y = 21; y <= 705; y += 124) {
    for (var x = 21; x <= 705; x += 124) {
       context.drawImage(img, x, y);
    }
  }
}

------解决方案--------------------

JScript code
window.onload = function(){
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        
        var 
            low = 7,     //循环行列
            row = 7,
            imgSrc = '0001.jpg',
            imgWidth = 16,
            imgHeight = 16,
            X = 50 ,    //起点坐标
            Y = 50;
        
        var img = new Image();
        img.src = imgSrc;        
        img.onload = function(){
            for( var j = 0; j < row ; j++ ){
                var y = j * imgHeight + Y;
                for( var i = 0; i< low ; i++  ){
                    var x = i* imgWidth + X;
                    context.drawImage(img,x,y);    
                }
                    
            }
        }
    }