<canvas id="myCanvas" width="600" height="300"></canvas>

canvas {
  border: 1px solid #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

window.addEventListener('load', eventWindowLoaded, false);

function eventWindowLoaded () {
  canvasApp(); //包含整个Canvas应用程序
}
function canvasSupport (e) {
  
	  return !!e.getContext;

}
function canvasApp () {
  var myCanvas = document.getElementById('myCanvas');

  if (!canvasSupport(myCanvas)) {
	  return; 
	}
  
  var ctx = myCanvas.getContext('2d');
  
  myCanvas.width = window.innerWidth;
  myCanvas.height = window.innerHeight;
  
  function drawGrid(color, stepX, stepY) {
    ctx.strokeStyle = color;
    ctx.lineWidth = 0.5;
    
    for (var i = stepX + 0.5; i < myCanvas.width; i += stepX) {
      ctx.beginPath();
      ctx.moveTo(i, 0);
      ctx.lineTo(i, myCanvas.height);
      ctx.stroke();
     
    }
    
    for (var i = stepY + 0.5; i < myCanvas.height; i += stepY) {
      ctx.beginPath();
      ctx.moveTo(0, i);
      ctx.lineTo(myCanvas.width, i);
      ctx.stroke(); 
    }
  }
  
  
  
  function drawScreen() {
    var dx = 50;
    var dy = 50;
    
    // 初始坐标原点
    var x = 0;
    var y = 0;
    var w = myCanvas.width;
    var h = myCanvas.height;
    var xy = 10;
    
    while (y < h) {
      y = y + dy;      
      //横坐标的数字  
      ctx.font = "1px Calibri";  
      ctx.fillText(xy, x, y);  
      xy += 10;  
    }
    // 画竖线
    y =0;  
    xy =10; 
    while (x < w) {
      x = x + dx;  
      //纵坐标的数字  
      ctx.font = "1px Calibri";  
      ctx.fillText(xy,x,10);    
      xy+=10;  
    }  
    
    drawGrid('#000', 50,50);
  }
  drawScreen();  
}