Línea de Código
Aprende a Programar

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().

ctx.strokeStyle = "#f00";
ctx.stroke();

Ya tenemos creada una cuadrícula sobre un CANVAS de HTML5.

Publicaciones relacionadas:

Dibujar líneas en Canvas con HTML5 Crear un Path sobre un Canvas de HTML5 Eje de coordenadas en Canvas HTML5 Crear un polígono en Canvas HTML5 Detectar el soporte del Canvas de HTML5