El elemento de diseño Canvas

Dibujar un rectángulo

Sintaxis: rect(x,y,width,height)

<canvas id="rectangulo" width="300" height="150">/</canvas>
	
	<script>/
	var miCanvas=document.getElementById("rectangulo"); 
	var miDibujo=miCanvas.getContext("2d"); 
		miDibujo.fillStyle="rgb(200,4,4)"; 
		miDibujo.rect(10,10,200,100); 
		miDibujo.shadowBlur=20; 
		miDibujo.shadowColor="black"; 
		miDibujo.shadowOffsetX=10; 
		miDibujo.shadowOffsetY=20; 
		miDibujo.fill(); 
	</script>



Dibujar un círculo

Sintaxis: arc(x,y,radius,startAngle,endAngle,antiClockwise)

<canvas id="ovalo" width="300" height="200"></canvas>
	
	<script> 
		var miCanvas=document.getElementById("ovalo"); 
		var miDibujo=miCanvas.getContext("2d"); 
		miDibujo.fillStyle="rgb(5,79,154)"; 
		miDibujo.arc(100,100,80,0,2*Math.PI,true);
		miDibujo.fill(); 
	</script>



Trazar bordes

La propiedad strokeStyle permite definir el color del borde. El método strokeRect() permite dibujar el borde de un rectángulo y el método stroke() permite dibujar un borde. 

<canvas id="contorno" width="300" height="150"></canvas>

	<script> 
		var miCanvas=document.getElementById("contorno"); 
		var miDibujo=miCanvas.getContext("2d"); 
		miDibujo.strokeStyle="#306"; 
		miDibujo.strokeRect(10,10,200,100); 
		miDibujo.arc(220,90,40,0,2*Math.PI,true); 
		miDibujo.stroke(); 
	</script>



Escribir texto

Puede insertar texto en el canvas con el método fillText(), para crear un texto de relleno, y strokeText(), para crear el borde del texto.

  • La propiedad textBaseline permite definir la línea de base que prefiramos.
  • La propiedad textAlign permite definir la alineación del texto.
  • La propiedad font permite definir la tipografía de caracteres que queramos utilizar.
<canvas id="texto" width="300" height="150"></canvas> 
	<script> 
		var miCanvas=document.getElementById("texto"); 
		var miTexto=miCanvas.getContext("2d"); 
		miTexto.textBaseline="alphabetic"; 
		miTexto.textAlign="center"; 
		miTexto.font="3em Nueva"; 
		miTexto.fillStyle="lime"; 
		miTexto.fillText("Canvas",100,50); 
	</script>

Crear degradados

Sintaxis: createLinearGradient(xinicio,yinicio,xfinal,yfinal)

addColorStop() para indicar la posición de inicio (escala de 0 a 1), y el color de inicio.

<canvas id="rectangulo2" width="300" height="150"></canvas>

	<script>
	 var miCanvas=document.getElementById("rectangulo2"); 
	 var miDibujo=miCanvas.getContext("2d"); 
	 var dgdl = miDibujo.createLinearGradient(10, 85, 200, 85); 
	 dgdl.addColorStop(0, "red"); 
	 dgdl.addColorStop(0.5, "#fff"); 
	 dgdl.addColorStop(1, "darkblue"); 
	 miDibujo.fillStyle=dgdl; 
	 miDibujo.rect(10,10,280,130); 
	 miDibujo.fill(); 
	</script>



Funciones avanzadas

Los frameworks son librerías con multitud de funciones predefinidas que ayudan a trabajar más eficientemente con Canvas, liberando al programador de realizar muchas tareas rutinarias.

Algunos de los frameworks ultizados con Canvas son los siguientes: EaselJS, Fabric.js, KineticsJS, Paper.js, three.js