Canvas.md

Canvas

Es un nuevo elemento HTML que puede usarse para dibujar gráficos a través de scripting (normalmente JavaScript). Por ejemplo, puede emplearse para dibujar gráficos, hacer composición de fotos, crear animaciones e incluso procesamiento de vídeo en tiempo real.

Para comenzar, creas la etiqueta como cualquier elemento HTML, donde puedes seleccionar entre otras cosas, el tamaño, el ancho, darle una id, etc. Ya luego, para comenzar a dibujar, se hace desde el archivo javascript.

<canvas height="300" width="300" id="dibujo"></canvas>

Iniciar el canvas en javascript, creamos una variable y le asignamos el canvas con el id que le dimos en html

var d = document.getElementById("dibujo");

En canvas se puede dibujar en 2 o 3 dimensiones, así que especificamos que queremos hacerlo en 2d, asignandole otra variable, siendo getContext() un método del canvas.

var lienzo = d.getContext("2d");

Para comenzar a dibujar, recordando que lienzo es el nombre que le dimos al canvas, escribimos

lienzo.beginPath();

Elegir color de la línea

lienzo.strokeStyle= "red";

Mover el lápiz a donde va a comenzar la línea (posición en X y Y, teniendo en cuenta que el punto de origen (0,0) en el canvas es la esquina superior izquierda)

lienzo.moveTo(100,100);

Trazar una línea

lienzo.lineTo(200,200);

Limpiar el canvas para hacer otro dibujo

lienzo3.clearRect(0, 0, canvas3.width, canvas3.height);

Usar las flechas del teclado para dibujar líneas

var papel = document.getElementById("dibujo");
var lienzo = papel.getContext("2d");
var teclas = {
  LEFT: 37,
  UP: 38,
  RIGHT: 39,
  DOWN: 40
};
var x = 150;
var y = 150;
var move = 10;

dibujar(149, 151, 149, 151);
//Canvas drawing function
function dibujar(xo, xi, yo, yi){
  lienzo.beginPath();
  lienzo.strokeStyle = "blue";
  lienzo.lineWidth = 3;
  lienzo.moveTo(xo, yo);
  lienzo.lineTo(xi,yi);
  lienzo.stroke();
  lienzo.closePath();
};

//Listen to user keyboard arrow press to draw lines on canvas
document.addEventListener("keyup", function(evento){
  switch(evento.keyCode){
    case teclas.UP:      
      dibujar(x, x, y, y-move);
      y -= move;
      break;
    case teclas.LEFT:      
      dibujar(x, x-move, y, y);
      x -= move;
      break;
    case teclas.DOWN:
      dibujar(x, x, y, y+move);
      y += move;
      break;
    case teclas.RIGHT:      
      dibujar(x, x+move, y, y);
      x += move;
      break;
  }
});