Entender el lienzo de canvas

  • Por
  • HTML
Veremos cómo es el lienzo de un canvas, formado por un eje de coordenadas que podemos utilizar para posicionar todos los dibujos que queramos colocar en el canvas.

Seguimos dando nuestros primeros pasos en el elemento canvas del HTML 5. Recordemos que en el anterior artículo vimos un primer ejemplo de dibujo en un canvas, así que ya tenemos una idea de las partes que integran el proceso para hacer un dibujo en el canvas:

  • Colocar la etiqueta CANVAS en el cuerpo de la página
  • Dibujar en el canvas utilizando un script en Javascript

En este artículo vamos a explicar las características de nuestro lienzo y las coordenadas con las que podemos movernos por él y realizar dibujos.

Eje de coordenadas del canvas

Para posicionar elementos en el canvas tenemos que tener en cuenta su eje de coordenadas en dos dimensiones, que comienza en la esquina superior izquierda del lienzo.

El lienzo producido por canvas tendrá unas dimensiones indicadas con los atributos width y height en la etiqueta CANVAS. Por tanto, la esquina superior izquierda será el punto (0,0) y la esquina inferior derecha el punto definido por (width-1,height-1), osea, el punto máximo de coordenadas marcado por su anchura y altura.

Nota: Hemos indicado que el punto de la esquina inferior derecha es (width-1,height-1) porque las coordenadas comienzan en (0,0), luego la coordenada final en anchura y altura será 1 menos el tamaño máximo de width y height definido en la etiqueta CANVAS. Por ejemplo, si la anchura es 50 y la altura es 100, entonces las coordenadas van desde (0,0) hasta (49,99).

Podemos ver el siguiente diagrama para tener una idea exacta de las dimensiones y coordenadas en un canvas.

Cualquier punto dentro del canvas se calcula con la coordenada (x,y), siendo que la x crece según los pixel a la derecha y la y con los pixel hacia abajo.

Para dibujar cualquier tipo de forma en el canvas necesitaremos posicionarla con respecto a las coordenadas que acabamos de ver. En el ejemplo del artículo anterior, vimos que para dibujar un rectángulo necesitamos varios valores:

contexto.fillRect(10, 10, 100, 70);

Los dos primeros parámetros eran las coordenadas x e y de la esquina superior izquierda del rectángulo. Los dos últimos parámetros son los valores de anchura y altura del mismo.

Pero hay otras formas que se pueden dibujar en un canvas que requieren el uso de métodos con un poco más elaborados que el dibujo de un rectángulo. Lo veremos más adelante.

Segundo ejemplo de trabajo con canvas

Para seguir familiarizándonos con el elemento canvas y el procedimiento de dibujo mediante Javascript vamos a ver un segundo ejemplo, también sencillo.

Vimos que parte del código Javascript necesario era para realizar las comprobaciones pertinentes a fin de asegurarnos que el navegador es compatible con canvas cuando queremos extraer el contexto del canvas antes de empezar a dibujar. En este ejemplo realizaremos una función para resumir estas tareas que podremos utilizar a lo largo de este manual.

//Recibe un identificador del elemento canvas y carga el canvas
//Devueve el contexto del canvas o FALSE si no ha podido conseguise
function cargaContextoCanvas(idCanvas){
   var elemento = document.getElementById(idCanvas);
   if(elemento && elemento.getContext){
      var contexto = elemento.getContext('2d');
      if(contexto){
         return contexto;
      }
   }
   return FALSE;
}

Podremos invocar esta función y evaluar su resultado para saber si se obtuvo o no el contexto del canvas.

var contexto = cargaContextoCanvas('micanvas');
if(contexto){
   //Tengo el contexto, entonces dibujo sobre el canvas
}

En este ejemplo vamos a dibujar un par de rectángulos, uno azul y otro amarillo. Ya vimos en el anterior ejemplo cómo se hacían formas rectangulares y también aprendimos a cambiar el color de la forma. Para mostrar otra de las posibilidades del canvas vamos a mostrar cómo hacer un color semitransparente.

//cambio el color de dibujo a azul
contexto.fillStyle = '#6666ff';
//dibujo un rectángulo azul
contexto.fillRect(10,10,50,50);
//cambio el color a amarillo con un poco de transparencia
contexto.fillStyle = 'rgba(255,255,0,0.7)';
//pinto un rectángulo amarillo semitransparente
contexto.fillRect(35,35,50,50);

Si nos fijamos, cuando se cambió el color a amarillo se especificó el color con RGBA, esto significa que estamos indicando también el canal Alpha, que indica el grado de transparencia desde 0 (totalmente transparente) a 1 (totalmente opaco).

Aclarmos de cualquier forma que todas estas funciones de dibujo las explicaremos con detenimiento más adelante.

El código completo de este segundo ejemplo se puede ver a continuación:

<html>
<head>
   <title>Canvas segundo ejemplo</title>

<script>
//Recibe un identificador del elemento canvas y carga el canvas
//Devueve el contexto del canvas o FALSE si no ha podido conseguise
function cargaContextoCanvas(idCanvas){
   var elemento = document.getElementById(idCanvas);
   if(elemento && elemento.getContext){
      var contexto = elemento.getContext('2d');
      if(contexto){
         return contexto;
      }
   }
   return FALSE;
}

window.onload = function(){
   //Recibimos el elemento canvas
   var contexto = cargaContextoCanvas('micanvas');
   if(contexto){
//Si tengo el contexto 
//cambio el color de dibujo a azul
contexto.fillStyle = '#6666ff';
//dibujo un rectángulo azul
contexto.fillRect(10,10,50,50);
//cambio el color a amarillo con un poco de transparencia
contexto.fillStyle = 'rgba(255,255,0,0.7)';
//pinto un rectángulo amarillo semitransparente
contexto.fillRect(35,35,50,50);
   }
}

</script>

</head>

<body>

<canvas id="micanvas" width="100" height="100">
Tu navegador no soporta canvas.
</canvas>

</body>
</html>

El ejemplo puede verse en marcha en una página aparte, pero tener en cuenta que hace falta disponer de compatibilidad con canvas en vuestro navegador.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

lord_of_php

17/11/2009
ACERCA DE CANVAS
Que buen articulo, explica las bases necesarias para iniciar con canvas de HTML 5, y quisiera sabes si es posible insertar una imagen en el lienzo y luego dibujar sobre ella, y si es posible, que bueno seria un articulo que ilustre esa tecnica

Gran Peke

07/12/2009
Que bueno!!
Ojalá pronto el gran hemano permita la utililzación de canvas sin tener que usar agregados. Saluldos, muy buen artículo.

PakoDiaz

01/6/2010
un cargaContextoCanvas un poco mas "elegante"
una observacion en tu fucnion cargaContextoCanvas en el caso de no encotrar el canvas y/o no tener disponible el getContext, retornas FALSE, lo cual es un error. ya que deveria de ser false en minusculas FALSE seria el nombre de una variable undefined, por lo que la funcion te retornarioa undefined en el mejor de los casos en el peor truena el script por acceder a una variable inacesible por que esta no se definio, en tu ejemplo no se nota por que en caso si se truena al fin no haces nada!.. pero eso no queda que este mal..

aqui te dejo otra funcion un poquito mas "elegante" ;)

function getCanvas2dContext(idCanvas){//by FcoDiaz
try{
return document.getElementById('lienso').getContext('2d');
}catch(e){return false;}
}

PakoDiaz

01/6/2010
un pequeño error
jeje un pequeño error se me fue en la funcion que mande es que la hice al "vuelo".. pero aqui esta corregida =)
function getCanvas2dContext(idCanvas){
try{
return document.getElementById(idCanvas).getContext('2d');
}catch(e){return false;}
}

Alexis Advance

19/6/2011
Sobre la función de PakoDiaz
Apoyo el uso de la función enviada por PakoDiaz. Es concisa e igual de efectiva =).

Acerca del artículo, éste es excelente. Gracias por todo, Desarrolloweb ;D.

Adrián

28/4/2012
Problema con Canvas
Estoy intentando realizar un dibujo con canvas y no consigo descubrir el error del siguiente codigo:

<!DOCTYPE html>

<html>
<head>
<title>Graficas Estadistica</title>
<script type="text/javascript">
function getCanvas2dContext(idCanvas){
try{
return document.getElementById(idCanvas).getContext('2d');
}catch(e){
return false;
}
}

function dibujar(){
if(ctx = getCanvas2dContext('canvas')){
alert(ctx);
ctx.beginPath();
ctx.rect(0, 0, parseInt(document.getElementById('canvas').width) - 1, parseInt(document.getElementById('canvas').heigth) - 1);
ctx.fillStyle = '#8ED6FF';
ctx.fill();
ctx.lineWidth = 5;
ctx.strokeStyle = 'black';
ctx.stroke();
}
}
</script>
</head>
<body onload="dibujar()">
<div style="float:left;height:670px;overflow-y:scroll">...</div>
<canvas id="canvas" width="1100px" height="670px" style="float:right">El navegador no soporta graficos CANVAS</canvas>
</body>
</html>

No hay problemas de sintaxis pero sige sin imprimir nada en el canvas, aunque al dar selleccionar todo si que se puede apreciar el elemento canvas y la alerta devuelve el objeto correctamente

Rubi Beltran

06/9/2016
Genial
Gracias fue de mucha ayuda! muy bien explicado...
Saludos!