Crear una cuadrícula sobre un Canvas de HTML5

En este ejemplo con el CANVAS de HTML5 vamos a generar una cuadrícula sobre el CANVAS , generando el efecto de un papel cuadriculado. De esta forma veremos como funcionan los métodos .moveTo() y la capacidad de dibujar líneas con .lineTo().

El resultado buscado será el siguiente:

Lo primero será definir el CANVAS :

Y cargar el CANVAS :

var canvas = document.getElementById("micanvas");
var ctx = canvas.getContext("2d");

Para generar el efecto de cuadrícula sobre el CANVAS vamos a crear dos bucles que dibujen líneas: uno horizontal y otro verticalmente. En el bucle lo que iremos será ir moviendo el punto de inicio de 10 pixels en 10 pixels hacía un lado o hacía otro.

for (var x=0; x<=300; x=x+10){
  ctx.moveTo(x,0);
  ctx.lineTo(x,300);
}

Vemos que vamos cambiando las coordenadas del origen de la línea mediante el método .moveTo(), el cual nos pone en el inicio de la trazada y con .lineTo() dibujamos la línea. Todo respetando los límites del CANVAS.

Ahora en la otra dirección, por la coordenada Y.

for (var y=0; y<=300; y=y+10){
  ctx.moveTo(0,y);
  ctx.lineTo(300,y);
}

Para que finalmente se pueda dibujar la cuadrícula nos quedan dos cosas: definir el color de las líneas y forzar su pintado mediante el método .stroke().