eamexicano

Canvas 2d context

Categories:

Esta especificación permite crear y manipular gráficos en una superficie. Canvas es compatible con – IE9+.

Para utilizar canvas tenemos que crear la etiqueta en el documento html. Para que se pueda visualizar de manera correcta, es necesario especificar el tamaño del canvas directamente en la etiqueta.

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>canvas</title>
    <style>
    #contenedor {width: 940px; height: 500px;  margin: 0 auto; border: 1px solid #000; text-align: center;}
    canvas {margin: 2em auto; background:#c5c5c5;}
    </style>
  </head>
  <body>
    <div id='contenedor'>
      <canvas id='canvas' width="500" height='250'>
        <p>
          El texto se va a visualizar en los navegadores que no soporten la etiqueta canvas
        </p>
      </canvas>
    </div>
  </body>
</html>

Una vez que tenemos el canvas hay que especificar el contexto en el cual lo queremos utilizar. En este caso es 2d (es importante que la d sea minúscula).

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>canvas</title>
    <style>
    #contenedor {width: 940px; height: 500px;  margin: 0 auto; border: 1px solid #000; text-align: center;}
    canvas {margin: 2em auto; background:#c5c5c5;}
    </style>
  </head>
  <body>
    <div id='contenedor'>
      <canvas id='canvas' width="500" height='250'>
        <p>
          El texto se va a visualizar en los navegadores que no soporten la etiqueta canvas
        </p>
      </canvas>
    </div>
    <script>
      var canvas = document.getElementById('canvas');
      var contexto = canvas.getContext('2d');
    </script>
  </body>
</html>

Una vez definido el canvas y el contexto podemos comenzar a dibujar.

Propiedades generales

Hay diferentes propiedades que podemos utilizar en los elementos.
Relleno, contorno, ancho de línea.

Propiedad

Descripción

fillStyle

Permite obtener o asignar un valor para rellenar formas.
El valor puede ser una cadena de texto donde se especifique un color (acepta los valores permitidos en CSS), un degradado o un patrón.

stokeStyle

Permite obtener o asignar un valor para el contorno de las formas.
El valor puede ser una cadena de texto donde se especifique un color (acepta los valores permitidos en CSS), un degradado o un patrón.

lineWidth

Permite obtener o asignar el ancho de la línea.

Degradado

Existen dos maneras para crear un degradado: linear y radial.
En este caso únicamente vamos a definir el degradado lineal.

Para crear un degradado lineal es necesario utilizar un contexto.
En el contexto se define el tamaño del degradado indicando la posición de inicio (x1, y1) y la posición final (x2, y2).

Una vez que se definió el degradado podemos definir puntos en los cuales queremos utilizar un color. Para esto vamos a utilizar addColorStop(posición, color).
El primer valor es un número decimal que va del 0 al 1 y representa el porcentaje (0% al 100%) en el que se comienza a utilizar el color.
El segundo valor es el color que se quiere utilizar (acepta los valores permitidos en CSS). 

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>canvas</title>
    <style>
    #contenedor {width: 940px; height: 500px;  margin: 0 auto; border: 1px solid #000; text-align: center;}
    canvas {margin: 2em auto; background:#c5c5c5;}
    </style>
  </head>
  <body>
    <div id='contenedor'>
      <canvas id='canvas' width="800" height='450'>
        <p>
          El texto se va a visualizar en los navegadores que no soporten la etiqueta canvas
        </p>
      </canvas>
    </div>
    <script>
    var canvas = document.getElementById('canvas'); 
    var contexto = canvas.getContext('2d');
    var horizontal = canvas.width;
    var degradado = contexto.createLinearGradient(0,0, horizontal,0);    
    degradado.addColorStop(0.00, 'red'); 
    degradado.addColorStop(0.25, 'green');    
    degradado.addColorStop(0.50, 'blue');    
    degradado.addColorStop(0.75, 'white');  
    degradado.addColorStop(1.00, 'black');        
    </script>
  </body>
</html>

Patrón

Para crear un patrón se puede utilizar una imagen o video. El patrón se puede repetir horizontal y / o verticalmente.
Para asegurar que el elemento (imagen / video) está disponible es recomendable crear el patrón una vez que el navegador carga el elemento. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>canvas</title>
    <style>
    #contenedor {width: 940px; height: 500px;  margin: 0 auto; border: 1px solid #000; text-align: center;}
    canvas {margin: 2em auto; background:#c5c5c5;}
    </style>
  </head>
  <body>
    <div id='contenedor'>
      <canvas id='canvas' width="800" height='450'>
        <p>
          El texto se va a visualizar en los navegadores que no soporten la etiqueta canvas
        </p>
      </canvas>
    </div>
    <script>
    var jirafa = new Image();
        jirafa.src = 'jirafa.png';
    var canvas = document.getElementById('canvas'); 
    var contexto = canvas.getContext('2d');
  
    jirafa.onload = function() {
       patron = contexto.createPattern(jirafa, 'repeat');      
     };
    </script>
  </body>
</html>

Nota:
Un degradado o patrón únicamente van a ser visibles cuando se asocian a un elemento del canvas.

Imágenes

Dentro del canvas es posible visualizar imágenes utilizando drawImage
Podemos utilizar diferentes argumentos para definir cómo se va a mostrar la imagen.

Métodos

Descripción

drawImage(img, x , y);

Define la imagen y la posición que va a tener dentro del canvas.

drawImage(img, x , y, w, h);

Define la imagen, la posición que va a tener dentro del canvas y el tamaño que va a tener la imagen en el canvas.

drawImage(img, ox1, oy1, ox2, oy2, x , y, w, h);

Define la imagen. Los primeros cuatro parámetros (origen) permiten definir la sección de la imagen original que se quiere mostrar. Esto sirve si se quiere visualizar una sección de la imagen. Los siguientes cuatro parámetros funcionan como el destino. Una vez que se delimitó la sección de la imagen a mostrar, se posiciona horizontal / verticalmente y se le asigna un tamaño.

Al igual que con los patrones, es recomendable esperar a que la imagen se cargue en el navegador para mostrarla en el DOM. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>canvas</title>
    <style>
    #contenedor {width: 940px; height: 500px;  margin: 0 auto; border: 1px solid #000; text-align: center;}
    canvas {margin: 2em auto; background:#c5c5c5;}
    </style>
  </head>
  <body>
    <div id='contenedor'>
      <canvas id='canvas' width="800" height='450'>
        <p>
          El texto se va a visualizar en los navegadores que no soporten la etiqueta canvas
        </p>
      </canvas>
    </div>

    <script>
    var jirafa = new Image();
        jirafa.src = 'jirafa.png';
    var canvas = document.getElementById('canvas'); 
    var contexto = canvas.getContext('2d');
    // Obtener las medidas del canvas
    var horizontal = canvas.width;
    var vertical = canvas.height;
    // Una vez que el navegador cargó la imagen 
    // la podemos visualizar
    jirafa.onload = function () {
    
      var posicion_horizontal = canvas.width / 2 - jirafa.width / 2;
      var posicion_vertical = canvas.height / 2 - jirafa.height / 2;        
      var tam_horizontal = jirafa.width / 2;
      var tam_vertical = jirafa.height / 2;
      
      // Centrar la imagen original
       contexto.drawImage(jirafa, posicion_horizontal , posicion_vertical);
      // Centrar la imagen original, visualizar a la mitad
      // contexto.drawImage(jirafa, posicion_horizontal , posicion_vertical, tam_horizontal, tam_vertical);          

// x1, y1, x2, y2, -> De la imagen para mostrar únicamente la parte definida en la posición / tamaño definidos en la segunda parte. 
      // contexto.drawImage(jirafa, 0, 0, 200, 200, posicion_horizontal , posicion_vertical, tam_horizontal, tam_vertical);          
         };
    </script>
  </body>
</html>

Texto

Para dibujar texto podemos utilizar dos funciones.

Atributo / Función

Descripción

fillText(mensaje, x, y, maxWidth)

Crea el mensaje. Visualiza el relleno del texto, en la posición indicada.
Se puede definir un ancho máximo. Para dibujar el relleno va a utilizar el valor del atributo fillStyle definido en el contexto.

strokeText(mensaje, x, y, maxWidth)

Crea el mensaje. Visualiza el contorno del texto, en la posición indicada.
Se puede definir un ancho máximo. Para dibujar el contorno va a utilizar el valor del atributo strokeStyle definido en el contexto.

font

Permite definir la fuente con la cual se va a visualizar el texto. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>canvas</title>
    <style>
    #contenedor {width: 940px; height: 500px;  margin: 0 auto; border: 1px solid #000; text-align: center;}
    canvas {margin: 2em auto; background:#c5c5c5;}
    </style>
  </head>
  <body>
    <div id='contenedor'>
      <canvas id='canvas' width="800" height='450'>
        <p>
          El texto se va a visualizar en los navegadores que no soporten la etiqueta canvas
        </p>
      </canvas>
    </div>
<script>
var canvas = document.getElementById('canvas'); 
var contexto = canvas.getContext('2d');
var mensaje = "¡Hola Canvas!";
contexto.font = "140px helvetica";
// Dibujar el relleno del texto en color rojo transparente
contexto.fillStyle = "rgba(255,0,0,0.45)";    
contexto.fillText(mensaje , 4, 180 , 790);
// Dibujar el relleno del texto en color azul transparente
contexto.fillStyle = "rgba(0,0,255,0.45)";    
contexto.fillText(mensaje , 10, 180 , 790);
// Dibujar el contorno del texto en color negro
contexto.strokeStyle = "#151515";
contexto.strokeText(mensaje , 7, 180 , 790);
</script>
  </body>
</html>

Rectángulos

Canvas también permite dibujar rectángulos de manera sencilla.

Método

Descripción

fillRect(x,y,w,h)

Se encarga de dibujar el relleno de un área rectangular que tiene origen en x, y, y que tiene un
tamaño de w (ancho), h(alto).

strokeRect(x,y,w,h)

Se encarga de dibujar el contorno de un área rectangular que tiene origen en x, y, y que tiene un
tamaño de w (ancho), h(alto).

clearRect(x,y,w,h)

Se encarga de borrar un área rectangular que tiene origen en x, y, y que tiene un
tamaño de w (ancho), h(alto). 

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>canvas</title>
    <style>
    #contenedor {width: 940px; height: 500px;  margin: 0 auto; border: 1px solid #000; text-align: center;}
    canvas {margin: 2em auto; background:#c5c5c5;}
    </style>
  </head>
  <body>
    <div id='contenedor'>
      <canvas id='canvas' width="500" height='250'>
        <p>
          El texto se va a visualizar en los navegadores que no soporten la etiqueta canvas
        </p>
      </canvas>
    </div>
<script>
var canvas = document.getElementById('canvas');
// Case does matter in the context is 2d
var contexto = canvas.getContext('2d');        
// Dibujar el relleno del rectángulo en color rojo transparente
contexto.fillStyle = "rgba(255,0,0,0.45)";    
contexto.fillRect(10, 10, 380 , 180);
// Dibujar el relleno del rectángulo en color azul transparente
contexto.fillStyle = "rgba(0,0,255,0.45)";    
contexto.fillRect(20 , 20, 380 , 180);
// Limpiar el relleno del rectángulo en color azul transparente
contexto.clearRect(20 , 20, 370 , 170);
// Dibujar el contorno del rectángulo en color negro
contexto.strokeStyle = "#151515";
contexto.strokeRect(15 , 15, 380 , 180);
</script>
  </body>
</html>

Trazos

Método

Descripción

beginPath()

Comienza o reestablece un trazo.

moveTo(x,y)

Se posiciona en las coordenadas x,y.

lineTo(x,y)

Crea una línea desde la posición en la que se encuentra a la posición definida.

.arc(x,y,radio,anguloInicial,anguloFinal[, contrareloj])

Crea un arco en la posición indicada. Para crear el arco se utiliza el radio, los ángulos de inicio / fin. Se puede indicar si quiere que el sentido vaya en contra de las manecillas del reloj.

fill()

Rellena el trazo actual o parte del trazo con el estilo de relleno definido.

stroke()

Dibuja el contorno del trazo con el estilo de contorno definido.

clip()

Restringe la sección de recorte de la ruta actual.

 
<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>canvas</title>
    <style>
    #contenedor {width: 940px; height: 500px;  margin: 0 auto; border: 1px solid #000; text-align: center;}
    canvas {margin: 2em auto; background:#c5c5c5; }
    </style>
  </head>
  <body>
    <div id='contenedor'>
      <canvas id='canvas' width="800" height='450'>
        <p>
          El texto se va a visualizar en los navegadores que no soporten la etiqueta canvas
        </p>
      </canvas>
    </div>  
    <script>
    var canvas = document.getElementById('canvas'); 
    var contexto = canvas.getContext('2d');

  	contexto.lineWidth = 1;
  	contexto.strokeStyle = "#151515";
  	contexto.fillStyle = "#f0f0f0";
  	// Líneas
  	contexto.beginPath();
  	contexto.moveTo(0,0);
  	contexto.lineTo(canvas.width,canvas.height);
  	contexto.moveTo(0,0);
  	contexto.lineTo(canvas.width / 2,canvas.height);
  	contexto.stroke();
  	// Círculo
  	contexto.beginPath();
  	contexto.arc(500,80,50, 0, 360);
  	contexto.stroke();
    </script>
  </body>
</html>

Esto es solo una parte de lo que se puede hacer con el contexto 2d en canvas. Descarga los ejemplos de referencia.