CANVAS

Breve introduccin a la programacin de

video juegos con JS

El elemento canvas permite especificar un rea de la pgina donde se puede, a
travs de scripts, dibujar y renderizar imgenes, lo que ampla notablemente las
posibilidades de las pginas dinmicas con la ventaja que para usar canvas no ser
necesario ningn plugin en el navegador, lo que mejorar la disponibilidad de esta
nueva aplicacin.
2014
Recopilado por: Didier Tobn
DATC
24/06/2014
[Escribir texto]

TABLA DE CONTENIDO
Contenido
I. Conceptos bsicos de CANVAS .................................................................................................... 4
i. Qu es canvas [2] .................................................................................................................... 4
ii. Compatibilidad de canvas [1] .................................................................................................. 4
iii. Aplicaciones de uso de Canvas [1] .......................................................................................... 4
II. Primer dibujo con CANVAS .......................................................................................................... 4
III. Iniciar canvas ........................................................................................................................... 5
i. Funcin de inicio. .................................................................................................................... 5
ii. Canvas en Internet Explorer. ................................................................................................... 6
IV. Entender el lienzo de canvas ................................................................................................... 8
i. Eje de coordenadas del canvas ............................................................................................... 8
ii. Un segundo ejemplo con canvas ............................................................................................. 9
V. Rectngulos. .............................................................................................................................. 10
i. Cuestiones previas ................................................................................................................ 10
ii. Rectngulos ........................................................................................................................... 10
iii. Mtodo fillRect ...................................................................................................................... 10
iv. Mtodo strokeRect ............................................................................................................... 11
v. Mtodo clearRect .................................................................................................................. 11
vi. Propiedad fillStyle ................................................................................................................. 11
vii. Propiedad strokeStyle ....................................................................................................... 11
VI. Dibujar rutas .......................................................................................................................... 12
i. Concepto de ruta ................................................................................................................... 12
ii. Trazar una ruta ...................................................................................................................... 12
Otro ejemplo de ruta..................................................................................................................... 13
VII. Estilos de lnea ....................................................................................................................... 14
i. Grosor de lnea ...................................................................................................................... 14
ii. Estilo de extremo de lnea ..................................................................................................... 15
iii. Estilo de esquinas .................................................................................................................. 16
VIII. Ms Ejemplos con lineas ....................................................................................................... 17
[Escribir texto]

i. Usemos Math. RAMDOM ...................................................................................................... 17
ii. Un ejemplo con lneas ........................................................................................................... 18
iii. Camino relleno sin cierre explcito ........................................................................................ 18
iv. Camino relleno con cierre explcito ....................................................................................... 19
v. Camino sin relleno y sin cierre .............................................................................................. 19
vi. Camino sin relleno y con cierre ............................................................................................. 20
vii. Pintar dos caminos distintos ............................................................................................. 20
viii. Un camino que pinta en dos lugares distintos .................................................................. 21
IX. Dibujar arcos ......................................................................................................................... 21
i. El mtodo arc() ...................................................................................................................... 21
ii. Entender los radianes ............................................................................................................ 22
iii. Ejemplo de dibujo de arcos. .................................................................................................. 22
iv. Dibujar figuras con arcos ....................................................................................................... 23
v. Ejemplo de dibujo de caminos con arcos .............................................................................. 24
X. Curvas de Bzier ........................................................................................................................ 25
i. Curvas cuadrticas ................................................................................................................ 25
ii. Mtodo QuadraticCurveTo() ................................................................................................. 25
iii. Curvas cbicas de Bezier. ...................................................................................................... 25
iv. Mtodo bezierCurveTo() ....................................................................................................... 25
v. Ejemplo de curva cuadrtica ................................................................................................. 26




4

I. Conceptos bsicos de CANVAS
i. Qu es canvas [2]
Canvas podramos traducirlo al espaol como "lienzo", y eso es lo que es, un espacio en la pgina en el que
podemos dibujar como en un lienzo.
Con el elemento canvas especificamos un rea dentro de la pgina en la que podemos dibujar, poner
imgenes, etc. Todo ello mediantes scripts (necesitaremos saber javascript), los resultados pueden ser
parecidos a utilizar flash, con la ventaja de que no necesitamos utilizar plugins externos.
Por tanto, el elemento canvas es ya a da de hoy una alternativa a tener en cuenta para el diseo de pginas
dinmicas, ya que no slo permite los dibujos o imgenes estticos, sino que podemos darles movimiento
mediante acciones de javascript.
ii. Compatibilidad de canvas [1]
El canvas se desarroll inicialmente por Apple para su navegador Safari y luego fue utilizado y estandarizado
por la organizacin WHATWG para incorporarlo a HTML 5. Posteriormente tambin ha sido adoptado por
navegadores como Firefox y Opera.
Por lo que respecta a Chrome, es un navegador que utiliza el mismo motor de renderizado que Safari, por lo
que tambin soporta el elemento Canvas.
De entre los navegadores ms habituales slo nos queda por soportar canvas el siempre polmico Internet
Explorer. La ltima versin del navegador en el momento de escribir este artculo, Internet Explorer 8, no
soporta canvas con funciones nativas, pero existen diversos proyectos y plugins que pueden ampliar las
funcionalidades del navegador para dar soporte a este nuevo elemento del HTML 5. Por ejemplo, existe el
proyecto Explorer Canvas en el que se ha preparado un plugin para que Explorer soporte el dibujo 2d que
permite canvas.
Sin embargo, aunque en diversos frentes se ha comenzado a utilizar Canvas, la falta de soporte de Explorer
hace que todava no sea muy recomendable su incorporacin a las aplicaciones web, ya que la mayora de
los usuarios, que utilizan explorer, no podran ver las partes de la pgina donde se utiliza canvas. Esta
situacin se espera que cambie durante los prximos meses o aos, puesto que la incorporacin de canvas
al HTML 5 ya es una realidad e Internet Explorer ms tarde o temprano tendr que dar soporte esta utilidad
en su navegador, si no quiere que se descarte su utilizacin por parte de los usuarios que deseen acceder a
los servicios web ms avanzados.
iii. Aplicaciones de uso de Canvas [1]
Canvas permite dibujar en la pgina y actualizar dinmicamente estos dibujos, por medio de scripts y
atendiendo a las acciones del usuario. Todo esto da unas posibilidades de uso tan grandes como las que
disponemos con el plugin de Flash, en lo que respecta a renderizacin de contenidos dinmicos. Las
aplicaciones pueden ser grandes como podamos imaginar, desde juegos, efectos dinmicos en interfaces de
usuario, editores de cdigo, editores grficos, aplicaciones, efectos 3D, etc.
II. Primer dibujo con CANVAS
Empezamos por poner en la pgina el cdigo HTML que indica en qu lugar de la pgina estar el dibujo, y el
tamao de ste.


5

El cdigo consiste en una nueva etiqueta que crea un rea dentro de la pgina. La etiqueta canvas deber
llevar como mnimo los atributos id, width y height. El atributo id permite identificarla para trabajar con ella
en javascript; mientras que los atributos width y heigth indicarn el tamao del rea del lienzo.

<!DOCTYPE HTML>
<html>
<head>
<title>Primer canvas</title>
<script type="text/javascript">
window.onload = function() {
var lienzo=document.getElementById("micanvas");
var contexto = lienzo.getContext('2d');
contexto.fillStyle = '#cc0000';
contexto.fillRect(10,10,160,110);
}
</script>
</head>
<body>
<h1>Primer dibujo con canvas</h1>
<canvas id="micanvas" width="200" height="150">
Si ves este texto es que tu navegador no admite canvas; por favor cambia a
Firefox, Chrome, Safari o Opera.
</canvas>
</body>
</html>

El cdigo javascript debe reconocer la etiqueta canvas por lo que debe cargarse despus que sta. Lo
insertaremos despus de esta etiqueta o mediante la funcion window.onload=function() { ... }.
Lo primero que haremos ser buscar en el DOM la etiqueta canvas para obtener el elemento de la pgina.
var lienzo=document.getElementById("micanvas");
Usamos luego una funcin de canvas para acceder al contexto "2d", lo cual es necesario para dibujar:
var contexto = lienzo.getContext('2d');
Una vez que hemos accedido al contexto de canvas ste tiene diversas funciones que permiten dibujar en
dos dimensiones. Utilizamos aqu una funcin para seleccionar el color de relleno contexto.fillStyle =
'#cc0000'; y una para pintar un rectngulo. contexto.fillRect(10,10,160,110);
Recordemos que el cdigo javascript anterior debe ir dentro de la funcin windows.onload = function() en
caso de que lo escribamos antes de la etiqueta canvas.
III. Iniciar canvas
i. Funcin de inicio.
Existe un cdigo bsico en javascript necesario para iniciar canvas,
window.onload = function(){
var canvas = document.getElementById('micanvas');
var contexto = canvas.getContext('2d');
}

Sin embargo canvas no es compatible con todos los navegadores, o puede ser que haya algn fallo, debemos
asegurarnos de que canvas funciona, y si no es as, que no anule el resto de cdigo javascript que pueda
haber en la pgina.


6

Tenemos que elaborar un cdigo que en caso de que canvas no funcione el navegador no haga nada. La
solucin est en poner todo este cdigo dentro de una funcin, a la que llamaremos cada vez que queramos
trabajar con un nuevo canvas:
function iniciaCanvas(idCanvas){
var elemento = document.getElementById(idCanvas);
if (elemento && elemento.getContext){
var contexto = elemento.getContext('2d');
if (contexto) {
return contexto;
}
}
return false;
}

La funcin tiene trabaja con el parmetro de la funcin idCanvas, es decir, debemos pasar el "id" del
elemento canvas. La funcin nos devuleve el contexto en caso de que exista, o false si ste no existe.

Por tanto ahora para trabajar con un elemento canvas slo tenemos que llamar a la funcin y comprobar
que el contexto existe:
window.onload=function() {
//llamamos a la funcin canvas:
contexto=iniciaCanvas("micanvas");
//comprobamos el contexto
if (contexto) {
//empezamos a dibujar:
contexto.fillRect(10,10,160,110);
}
}
<canvas id="micanvas" width="400" height="300">
<p>Tu navegador no es compatible con canvas, cambia a
Firefox, Safari, Chrome o Opera.</p>
</canvas>

El texto que hay dentro de la etiqueta canvas es opcional, y aparece slo en caso de que el dibujo con canvas
no funcione.
Podemos poner varios canvas en la pgina. La funcin iniciaCanvas() nos sirve tambin para iniciar estos
otros canvas, slo tenemos que llamarlas con su atributo id:
contexto=iniciaCanvas("micanvas2");
if (contexto) {
contexto.fillRect(10,10,160,110);
//aqu seguimos poniendo el dibujo ...
}

Si tenemos varias pginas con lienzos de canvas, podemos tambin sacar la funcin de inicio a un archivo
javascript aparte, y poner en cada una de ellas el link a esa pgina:
<script type="text/javascript" src="inicioCanvas.js"></script>

ii. Canvas en Internet Explorer.
En principio canvas no funciona en Internet Explorer, sin embargo podemos hacer que funcione gracias a
una librera externa llamada "flashcanvas". Lo primero que tenemos que hacer es descargarnos la librera en


7

la pginahttp://code.google.com/p/flashcanvas/. Abrimos esta pgina, y en la parte de arriba, en la barra de
navegacin, pulsamos en "Downloads".


Se nos abre otra pgina desde la que podemos hacer la descarga:


Dentro de esta carpeta tenemos otras tres carpetas: bin, doc y examples. La carpeta bin contiene los
archivos que nos interesan. La carpeta doc contiene informacin sobre los autores, la licencia y otras cosas.
La carpeta examples contiene algunos ejemplos realizados con flashcanvas.
Nosotros slo necesitamos la carpeta bin por lo que la cogemos y la pegamos en nuestro sitio.
Si abrimos esta carpeta vemos que hay varios archivos, todos son necesarios para que funcione
"flashcanvas", sin embargo nos fijamos en el archivo flashcanvas.js.
Lo nico que tenemos que hacer para que funcione "flashcanvas" es crear un link de javascript hacia este
archivo:
<script type="text/javascript" src="bin/flashcanvas.js"></script>

Sin embargo, como queremos que este link se active slo cuando el usuario utilice Internet Explorer,
Pondremos un filtro a este link, de manera que el cdigo quedar de la siguiente manera:
<!--[if lt IE 9]>
<script type="text/javascript" src="bin/flashcanvas.js"></script>
<![endif]-->

Esto hace que el script se active slo para versiones anteriores a Internet Explorer 9.

El cdigo completo para un correcto inicio del canvas se da a continuacin.

En primer lugar creamos el archivo iniciaCanvas.js, que contendr la funcin de inicio:
function iniciaCanvas(idCanvas){
var elemento = document.getElementById(idCanvas);
if (elemento && elemento.getContext){
var contexto = elemento.getContext('2d');
if (contexto) {
return contexto;
}
}
return false;
}

Despus creamos la pgina en la cual tendremos que aadir un link hacia este archivo y otro hacia
flashcanvas, adems del cdigo de dibujo de canvas y su html:


8

<!DOCTYPE HTML>
<html>
<head>
<title>micanvas</title>
<script type="text/javascript" src="iniciaCanvas.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="bin/flashcanvas.js"></script>
<![endif]-->
<script type="text/javascript">
window.onload=function() {
contexto=iniciaCanvas("micanvas");
if (contexto) {
contexto.fillRect(10,10,160,110);
//aqu podemos seguir con ms instrucciones de dibujo
}
}
</script>
</head>
<body>
<h1>Inicio de canvas</h1>
<canvas id="micanvas" width="400" height="300">
<p>Tu navegador no es compatible con canvas, cambia a
Firefox, Safari, Chrome o Opera.</p>
</canvas>
</body>
</html>

IV. Entender el lienzo de canvas
i. Eje de coordenadas del canvas
Para posicionar elementos en el canvas tenemos que tener en cuentasu 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 mximo de coordenadas marcado por su anchura y
altura. Se ha 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 tamao
mximo 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).

Cualquier punto dentro del canvas se calcula con la coordenada (x,y), siendo que la x crece segn 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. Por ejemplo para dibujar un rectngulo
necesitamos varios valores, contexto.fillRect(10, 10, 100, 70);Los dos primeros parmetros eran las
coordenadas x e y de la esquina superior izquierda del rectngulo. Los dos ltimos parmetros son los
valores de anchura y altura del mismo.



9



ii. Un segundo ejemplo con canvas
Vimos que parte del cdigo 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, para ello se crea el archivo iniciaCanvas.js, en el cual se crea la siguiente
funcin.
function iniciaCanvas(idCanvas){
var elemento = document.getElementById(idCanvas);
if (elemento && elemento.getContext){
var contexto = elemento.getContext('2d');
if (contexto) {
return contexto;
}
}
return false;
}
Podremos invocar esta funcin y evaluar su resultado para saber si se obtuvo o no el contexto del canvas.
var contexto = iniciaCanvas ('micanvas');
if(contexto){
//Tengo el contexto, entonces dibujo sobre el canvas
}

En este ejemplo vamos a dibujar un par de rectngulos, uno azul y otro amarillo, con otra de las
posibilidades del canvas que es hacer un color semitransparente.
//cambio el color de dibujo a azul
contexto.fillStyle = '#6666ff';
//dibujo un rectngulo 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 rectngulo 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 tambin el canal Alpha, que indica el grado de transparencia desde 0 (totalmente
transparente) a 1 (totalmente opaco).


10

El cdigo completo HTML de este segundo ejemplo se puede ver a continuacin, recuerde que que se debe
crear el archivo iniciaCanvas.js:
<html>
<head><title>Canvas segundo ejemplo</title>
<script type="text/javascript" src="iniciaCanvas.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="bin/flashcanvas.js"></script>
<![endif]-->
<script>
window.onload = function(){
//Recibimos el elemento canvas
var contexto = iniciaCanvas ('micanvas');
if(contexto){
//Si tengo el contexto
//cambio el color de dibujo a azul
contexto.fillStyle = '#6666ff';
//dibujo un rectngulo 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 rectngulo 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>

V. Rectngulos.
i. Cuestiones previas
Vamos a ver cmo dibujar lneas y figuras con lineas rectas, tales como cuadrados, tringulos, etc. A partir
de ahora, al dar cdigos de canvas, daremos por hecho que ya hemos llamado a la funcin, as como que el
cdigo lo hemos puesto dentro de la funcin annima window.onload = function(), o en su defecto
est colocado detrs del elemento html canvas.

ii. Rectngulos
Veremos a continuacin unos mtodos que aplicamos al contexto para dibujar rectngulos, as como unas
propiedades para cambiar su color. Dentro de javascript extraemos el contexto de canvas, al que
llamaremos cxt. Utilizaremos para ello la funcin cxt=iniciaCanvas("micanvas1")
Ahora podemos utilizar los siguientes mtodos para dibujar rectngulos:
iii. Mtodo fillRect
cxt.fillRect(a,b,c,d); Dibuja un rectngulo y lo rellena de color. Los parmetros a y b indican la distancia en
pxeles horizontal y vertical respectivamente que hay desde el extremo superior izquierdo del canvas o
lienzo hasta el extremo superior izquierdo del cuadrado, es decir las coordenadas X e Y. Los parmetros c y d
indican la anchura y altura del rectngulo medida en pxeles. Estos parmetros son nmeros, por lo que
debemos escribirlos sin comillas y sin ningn indicador de medida.


11

Por ejemplo cxt.fillRect(10,10,50,50);Dibuja un cuadrado de 50 x 50 pixeles a una distancia de 10 pixeles a
la derecha y 10 hacia abajo del borde superior izquierdo del canvas.
iv. Mtodo strokeRect
cxt.strokeRect(a,b,c,d); Al igual que el anterior, ste tambin dibuja un rectngulo, pero slo el contorno,
es decir las lneas de alrededor. El valor de los parmetros es igual que en el anterior, es decir, a y b son las
coordenadas X e Y, y c y d son la anchura y altura respectivamente.
v. Mtodo clearRect
cxt.clearRect(a,b,c,d); Este mtodo borra un rea rectangular y la deja transparente o sin contenido.
Los parametros tienen el mismo valor que en los mtodos anteriores: a y b son las coordenadas, y c y d la
anchura y altura.
vi. Propiedad fillStyle
cxt.fillStyle="<color>"; Esta propiedad cambia el color de relleno de los elementos que, en el cdigo estn
escritos despus de ella. Su valor puede ser cualquier forma de escribir los colores, incluidas las nuevas
formas con transparencia para HTML5, si bien estas ltimas no sern soportadas por algunos navegadores.
vii. Propiedad strokeStyle
cxt.strokeStyle="<color>";Esta propiedad cambia el color de las lneas, y por lo tanto del contorno de los
elementos que en el cdigo van escritos detrs de ella. Su valor, al igual que la anterior, puede ser cualquier
forma de escribir un color.

Vamos a hacer un pequeo ejemplo de poner varios rectngulos en un canvas. el cdigo html del canvas y el
cdigo del script sern:

<canvas id="micanvas1" width="200px" height="120px">
</canvas>
<script>
window.onload=function() {
cxt=iniciaCanvas("micanvas1");
if (cxt) {
cxt.fillRect(10,10,50,40);//dibujamos un rectngulo.
cxt.fillStyle="green"; //cambiamos color de relleno a azul.
cxt.fillRect(70,10,50,40); //otro rectngulo a la derecha.
cxt.fillStyle="red"; //cambiamos color de relleno a rojo.
cxt.fillRect(130,10,50,40); //otro rectngulo a la derecha.
cxt.strokeRect(10,60,50,40); //dibujamos un rectngulo, slo el contorno.
cxt.strokeStyle="blue"; //cambiamos el color de contorno a azul.
cxt.strokeRect(70,60,50,40); //contorno de rectngulo.
cxt.strokeStyle="fuchsia"; //cambiamos color contorno a fucsia.
cxt.strokeRect(130,60,50,40); //contorno de rectngulo.
} }
</script>

A los primeros no les hemos dado color, por lo que toma el color que tiene el navegador por defecto, que
suele ser el negro.

Veamos otro ejemplo, un poco ms complicado:
<canvas id="micanvas2" width="150" height="240">
</canvas>
<script>


12

window.onload = function().
cxt2=iniciaCanvas("micanvas2");
if (cxt2) {
cxt2.fillStyle="red";//color de relleno rojo
cxt2.fillRect(20,20,110,80); //dibujamos un rectngulo
cxt2.strokeStyle="blue"; //color de contorno azul
cxt2.strokeRect(20,20,110,80); //cotorno del rectngulo anterior
cxt2.fillStyle="green"; //color de relleno verde
//este rectngulo y el siguiente se cruzan formando una cruz
cxt2.fillRect(65,30,20,60);
cxt2.fillRect(45,50,60,20);
cxt2.fillRect(20,130,110,80); //dibujamos otro rectngulo debajo del primero
cxt2.strokeRect(20,130,110,80); //contorno del rectngulo anterior
//borramos dos rectngulos dentro del anterior, formando una cruz.
cxt2.clearRect(65,140,20,60);
cxt2.clearRect(45,160,60,20);
}
</script>
Los mtodos tambin nos permiten dibujar cuadrados, ya que un cuadrado no es ms que un rectngulo con
los dos lados iguales.
VI. Dibujar rutas
i. Concepto de ruta
Realizar un dibujo en Canvas es parecido a realizarlo en papel. Vamos de un punto a otro trazando una lnea,
desde este ltimo punto vamos al siguiente, y seguimos trazando la lnea, luego podemos levantar el lpiz
y llevarlo a otro punto, para seguir trazando otra lnea, etc.
Esto es lo que hacemos con Canvas, indicamos dnde est cada uno de esos puntos y se ir trazando un
dibujo al ir pasando por cada uno de ellos. Al camino recorrido al trazar la lnea se le llama ruta, o tambin
camino. Las lneas que unen los puntos pueden ser rectas o curvas. Tambin podemos levantar el "lpiz" al
pasar de una lnea a otra.
Al "lpiz" imaginario le llamamos puntero, y recorre toda la lnea de un punto a otro, por lo tanto estar en
cada momento en una posicin, normalmente en donde acaba la ltima lnea que hemos trazado.
Al cerrarse las lneas forman dibujos, que pueden ser coloreados, o simplemente tener el contorno dibujado.
Para todo esto Canvas dispone de una serie de mtodos que se aplican al contexto.
ii. Trazar una ruta
Mtodo beginPath()Este mtodo inicia una nueva ruta. Debemos ponerlo siempre al principio de la ruta.
Este mtodo no tiene parmetros. Reinicia los estilos de color, grosor de lnea, etc.

Color de lnea y de relleno. El siguiente paso que vamos a hacer es dar al dibujo un color de linea y otro
de relleno. Esto se hace con las propiedades fillStyle y strokeStyle. Aunque es conveniente ponerlas al
principio, estas propiedades las podemos poner en cualquier punto del cdigo. Toda la ruta tendr los
mismos colores. Para cambiar de color debemos crear una nueva ruta mediante beginPath().



13

Empezar el dibujoPara empezar el dibujo debemos en principio colocar el puntero en el las coordenadas
de inicio. Esto se hace mediante el mtodo moveTo(x,y). El mtodo moveTo es como si levantramos el lpiz
y lo llevramos hasta el punto indicado. Cada vez que queramos llevar el puntero a otro punto sin que se
dibuje nada utilizaremos este mtodo.

Dibujar lneas rectasPara dibujar lneas rectas utilizaremos el mtodo lineTo(x,y). Los parmetros "x" y "y"
indican las coordenadas del final de la lnea. El principio de la lnea estar en la posicin que tenga el
puntero. El puntero se mueve despus al final de la lnea, de manera que la siguiente lnea que pongamos
empezar donde acaba sta. Ejemplo, si queremos dibujar un tringulo por lo que necesitamos tres lneas,
ponemos de momento las dos primeras. cxt.lineTo(140,140); cxt.lineTo(10,140); El puntero se desplaza
desde su posicin anterior a la marcada por lineTo. La lnea todava no se ha dibujado, pero est ya marcada.
Por otra parte nos falta la tercera lnea para cerrar el tringulo.

Cerrar una figura Nos falta una lnea para cerrar la figura. Tenemos ahora dos opciones, dibujar el
contorno, para lo cual debemos cerrar la figura, o rellenar la figura de un color, para lo cual no es necesario
cerrarla. Para cerrar el contorno utilizaremos el mtodo closePath(). Este mtodo no tiene parmetros,
simplemente traza una lnea desde el punto donde est el puntero al inicio de la figura. cxt.closePath();
Ahora para dibujar las lneas anteriores en el canvas como un contorno utilizaremos el mtodo stroke(). Este
mtodo tampoco tiene argumentos. Hace que las lneas que hay marcadas en la ruta se dibujen como un
contorno.
Sin embargo si lo que queremos es rellenar la figura de un color, el mtodo closePath no es necesario.
Utilizaremos el mtodo fill() el cual rellena de color la figura aunque no est cerrada, ya que el mtodo traza
la lnea recta desde el ltimo punto al primero. Con esto ya hemos trazado una ruta simple para dibujar un
tringulo, veamos ahora cmo queda en la prctica.

Recogemos el cdigo anterior y lo aplicamos a la siguiente etiqueta canvas en HTML:
<canvas id="micanvas1" width="150" height="150">
</canvas>
<script>window.onload=function() {
cxt=iniciaCanvas("micanvas1");
if (cxt) {
cxt.beginPath();
cxt.fillStyle="red";
cxt.strokeStyle="blue";
cxt.moveTo(65,10);
cxt.lineTo(140,140);
cxt.lineTo(10,140);
cxt.closePath();
cxt.stroke();
cxt.fill();
}}
</script>
Otro ejemplo de ruta.
El ejemplo anterior es muy sencillo, sin embargo podemos hacer dibujos tan complicados como quieras,
utilizando los mismos mtodos anteriores, es cuestin de imaginacin y despus planificarlos. Damos aqu
otro ejemplo en el que dibujamos varias figuras con lneas rectas dentro de un canvas.

<canvas id="micanvas2" width="210" height="80">
</canvas>
<script>
cxt2=iniciaCanvas("micanvas2");


14

if (cxt2) {
cxt2.beginPath(); //inicio de ruta
cxt2.fillStyle="red"; //color de relleno rojo;
cxt2.strokeStyle="red"; //color de contorno rojo;
cxt2.moveTo(30,10); //dibujar rombo
cxt2.lineTo(50,40);
cxt2.lineTo(30,70);
cxt2.lineTo(10,40);
cxt2.fill(); //rellenar de color
cxt2.moveTo(80,10); //dibujar otro rombo
cxt2.lineTo(100,40);
cxt2.lineTo(80,70);
cxt2.lineTo(60,40);
cxt2.closePath(); //cerrar contorno
cxt2.stroke(); //visualizar contorno
cxt2.beginPath(); //iniciar otra ruta
cxt2.fillStyle="blue"; //color de relleno azul
cxt2.strokeStyle="blue"; //color de contorno azul
cxt2.moveTo(110,10); //dibujar figura reloj de arena
cxt2.lineTo(150,10);
cxt2.lineTo(110,70);
cxt2.lineTo(150,70);
cxt2.fill(); //rellenar de color
cxt2.moveTo(160,10); //otra figura reloj de arena
cxt2.lineTo(200,10);
cxt2.lineTo(160,70);
cxt2.lineTo(200,70);
cxt2.closePath(); //cerrar contorno
cxt2.stroke(); //visualizar contorno
}}
</script>
VII. Estilos de lnea
i. Grosor de lnea
Se puede modificar el grosor de lnea en Canvas con la propiedad cxt.lineWidth=n;
Donde el valor n es un nmero que indica el grosor de la lnea en pxeles.
La propiedad afecta a todas las lneas que haya antes del mtodo stroke(). Para cambiar de grosor la
siguiente lnea primero debemos llamar al mtodo stroke() y despus a lineWidth();

Veamos un ejemplo: ponemos primero el cdigo HTML del canvas:
<canvas id="ejemplo1" width="200" height="100">
</canvas>
<script>
window.onload=function() {
cxt=iniciaCanvas("ejemplo1");
if (cxt) {
cxt.beginPath(); //iniciamos una ruta
cxt.strokeStyle="blue"; //Color de lnea
cxt.lineWidth=12; //primer grosor de lnea
cxt.moveTo(20,20); //primera lnea: inicio


15

cxt.lineTo(180,40); //primera lnea: final
cxt.stroke(); //visualizar primera lnea
cxt.lineWidth=6; //grosor segunda lnea
cxt.moveTo(20,50); //segunda lnea: inicio
cxt.lineTo(180,70); //segunda lnea: final
cxt.stroke(); //visualizar segunda lnea
}}
</script>
Haremos ahora un segundo ejemplo en el que pondremos varias lneas que disminuyen de grosor
progresivamente. Para no alargar excesivamente el cdigo podemos utilizar un bucle que repita las
instrucciones en cada lnea; el cdigo HTML del canvas ser:
<canvas id="ejemplo2" width="200" height="200">
</canvas>
<script>
window.onload=function() {
cxt2=iniciaCanvas("ejemplo2");
if (cxt2) {
cxt2.beginPath(); //iniciamos la ruta
cxt2.strokeStyle="fucshia"; //color de lnea
x1=10;y1=30; //coordenadas 1 lnea, 1 punto.
x2=100;y2=10; //coordenadas 1 lnea, 2 punto.
x3=190;y3=30; //coordenadas 1 lnea, 3 punto.
for (i=12;i>0;i--) { //bucle: repetimos 12 veces
cxt2.lineWidth=i; //grosor de lnea=i
cxt2.moveTo(x1,y1); //punto inicial de lnea
cxt2.lineTo(x2,y2); //punto intermedio de lnea
cxt2.lineTo(x3,y3); //punto final de lnea
cxt2.stroke(); //visualizar lnea
y1+=15;y2+=15;y3+=15; //siguiente lnea 15px por debajo.
}
}}
</script>
ii. Estilo de extremo de lnea
Podemos tambin modificar los extremos de la lnea. Para ello la lnea debe ser lo bastante gruesa como
para que se pueda ver la diferencia de estilo. Utilizaremos para ello la propiedad lineCap Los posibles valores
que admite esta propiedad son:
"butt": Valor por defecto, deja la lnea como est.
"round": Aade un semicirculo al principio y al final de la lnea, dejando los extremos redondeados.
"square": Aade medio cuadrado al principio y al final de la lnea.
Los valores debemos escribirlos entre comillas (a no ser que vayan recogidos en una variable), ya que son
cadenas de texto. En las opciones "round" y "square" la Lnea se alarga el mismo nmero de pxeles que
tiene de grosor (la mitad de ellos por cada extremo). La propiedad afecta a toda la ruta, por lo que si
queremos cambiar de estilo de extremo debemos iniciar una nueva ruta. Veamos un ejemplo en el que se
muestran los tres tipos de extremo de lnea.

<canvas id="ejemplo3" width="200" height="100">
</canvas>
<script>


16

window.onload=function() {
cxt3=iniciaCanvas("ejemplo3");
if (cxt3) {
cxt3.beginPath(); //iniciamos la ruta
cxt3.strokeStyle="#f0f"; //color de lnea
cxt3.lineWidth=12; //grosor de lnea
cxt3.lineCap="butt"; //extremo lnea: normal
cxt3.moveTo(20,20); //trazamos la lnea
cxt3.lineTo(180,20);
cxt3.stroke();
cxt3.beginPath(); //nueva ruta
cxt3.lineCap="round"; //extremo lnea: redondo
cxt3.moveTo(20,50); //trazamos la lnea
cxt3.lineTo(180,50);
cxt3.stroke();
cxt3.beginPath(); //nueva ruta
cxt3.lineCap="square"; //extremo linea: cuadrado
cxt3.moveTo(20,80);
cxt3.lineTo(180,80);
cxt3.stroke();
}}
</script>
iii. Estilo de esquinas
Cuando hay dos lneas rectas seguidas, es decir que hacen esquina, no nos sirve la propiedad lineCap para
cambiar su estilo. sta slo se aplica al principio de la primera lnea y al final de la ltima. Para variar la
forma que tiene la esquina utilizaremos la propiedad lineJoin. Los posibles valores que admite esta
propiedad son:
"miter": Valor por defecto: la esquina entre dos lneas toma su forma normal.
"round": La esquina entre dos lneas toma una forma redondeada.
"bevel": La esquina entre dos lneas se corta de forma que hace chafln.

Al igual que la propiedad anterior, sta afecta a toda la ruta, de manera que si queremos cambiar de estilo,
debemos crear una nueva ruta. Veamos un ejemplo con los valores de esta propiedad.
<canvas id="ejemplo4" width="200" height="200">
</canvas>
</pre>
<script>
window.onload=function() {
cxt4=iniciaCanvas("ejemplo4");
if (cxt4) {
cxt4.beginPath(); //iniciar ruta
cxt4.strokeStyle="green"; //color de lnea
cxt4.lineWidth=10; //grosor de lnea
cxt4.lineJoin="miter" //esquina de lneas: valor "mitter"
cxt4.moveTo(20,20); //dibujar ruta
cxt4.lineTo(160,20);
cxt4.lineTo(20,60);
cxt4.stroke(); //visualizar ruta
cxt4.beginPath(); //nueva ruta
cxt4.lineJoin="round" //esquina de lneas: valor "round"
cxt4.moveTo(20,80); //dibujar ruta


17

cxt4.lineTo(160,80);
cxt4.lineTo(20,120);
cxt4.stroke(); //visualizar ruta
cxt4.beginPath(); //nueva ruta
cxt4.lineJoin="bevel" //esquina de lineas: valor "bevel"
cxt4.moveTo(20,140); //dibujar ruta
cxt4.lineTo(160,140);
cxt4.lineTo(20,180);
cxt4.stroke(); //visualizar ruta
}}
</script>

VIII. Ms Ejemplos con lineas
i. Usemos Math. RAMDOM
Veamos ahora un ejercicio que nos sirve de ejemplo para mostrar cmo cambiar el color de relleno. En
concreto vamos a rellenar el canvas con muchos cuadraditos de colores aleatorios y adems haremos que
cada pocos instantes se vuelva a dibujar el canvas con nuevos cuadraditos aleatorios, con lo que
generaremos nuestra primera y pequea animacin.
<canvas id="micanvas1" width="150" height="150">
</canvas>
<script>window.onload=function() {
//variable global contexto sin inicializar
var cxt;
cxt=iniciaCanvas("micanvas1");
if (cxt) {
//Si tengo el contexto, defino la funcin peridica
setInterval("cuadradosAleatorios(contexto)", 200);
}
}
function aleatorio(inferior,superior){
numPosibilidades = superior - inferior
aleat = Math.random() * numPosibilidades
aleat = Math.floor(aleat)
return parseInt(inferior) + aleat
}
function colorAleatorio(){
return "rgb(" + aleatorio(0,255) + "," + aleatorio(0,255) + "," + aleatorio(0,255) + ")";
}
function cuadradosAleatorios(){
for(i=0; i<300; i+=10){
for(j=0; j<250; j+=10){
contexto.fillStyle = colorAleatorio();
contexto.fillRect(i,j,10,10)
}
}
}



18

ii. Un ejemplo con lneas
<canvas id="micanvas1" width="150" height="150">
</canvas>
<script>window.onload=function() {
//variable global contexto sin inicializar
var cxt;
cxt=iniciaCanvas("micanvas1");
if (cxt) {
ctx.beginPath();
ctx.moveTo(1,1);
for (i=1;i<100;i+=5){
if((i%2)!=0){
ctx.lineTo(i+5,i);
}else{
ctx.lineTo(i,i+5);
}
}
ctx.lineTo(1,i);
ctx.closePath();
ctx.stroke();
}
//otro ejemplo basado en el mismo cdigo
var ctx = cargaContextoCanvas('micanvas2');
if(ctx){
ctx.beginPath();
ctx.moveTo(1,1);
for (i=1;i<100;i+=5){
if((i%2)!=0){
ctx.lineTo(i+5,i);
}else{
ctx.moveTo(i,i+5);
}
}
ctx.stroke();
}
}</script>
iii. Camino relleno sin cierre explcito
Para rellenar de color un camino utilizamos la el mtodo fill() del contexto del canvas, que antes de rellenar
de color hace un cierre automtico del camino. De esta manera, aunque no se haya completado el camino
hasta cerrarlo, al invocar ctx.fill() esta funcin lo cerrar por nosotros
<canvas id="micanvas1" width="150" height="150">
</canvas>
<script>window.onload=function() {
//variable global contexto sin inicializar
var cxt;
cxt=iniciaCanvas("micanvas1");


19

if (cxt) {
//Hexagono relleno de color, cierre de camino automtico con fill
ctx.beginPath();
ctx.moveTo(50,15);
ctx.lineTo(112,15);
ctx.lineTo(143,69);
ctx.lineTo(112,123);
ctx.lineTo(50,123);
ctx.lineTo(19,69);
ctx.fill();
}}
iv. Camino relleno con cierre explcito
En esta segunda variante del camino del hexgono tenemos un camino que s hemos cerrado explcitamente
con el mtodo closePath(). Sin embargo, como fill() ya se encargaba de cerrar el camino por nosotros.
<canvas id="micanvas1" width="150" height="150">
</canvas>
<script>window.onload=function() {
//variable global contexto sin inicializar
var cxt;
cxt=iniciaCanvas("micanvas1");
if (cxt) {
tx.fillStyle = '#990000';
ctx.beginPath();
ctx.moveTo(50,15);
ctx.lineTo(112,15);
ctx.lineTo(143,69);
ctx.lineTo(112,123);
ctx.lineTo(50,123);
ctx.lineTo(19,69);
ctx.closePath();
ctx.fill();
}}
v. Camino sin relleno y sin cierre
Como veremos, el camino es exactamente igual que los anteriores, con la diferencia que para dibujar slo la
lnea del contorno del camino se utiliza el mtodo stroke() del objeto contexto de canvas, en lugar de usar
fill() que hace los caminos con relleno de color. Adems, podremos observar como al usar el mtodo stroke()
no se cierra automticamente el camino como ocurra con fill(), sino que se queda abierto.
<canvas id="micanvas1" width="150" height="150">
</canvas>
<script>window.onload=function() {
//variable global contexto sin inicializar
var cxt;
cxt=iniciaCanvas("micanvas1");
if (cxt) {
ctx.beginPath();
ctx.moveTo(50,15);


20

ctx.lineTo(112,15);
ctx.lineTo(143,69);
ctx.lineTo(112,123);
ctx.lineTo(50,123);
ctx.lineTo(19,69);
ctx.stroke();
}}
vi. Camino sin relleno y con cierre
El camino es el mismo, pero antes de llamar a stroke() para dibujar la lnea, hacemos un closePath() para
cerrar el camino.
<canvas id="micanvas1" width="150" height="150">
</canvas>
<script>window.onload=function() {
//variable global contexto sin inicializar
var cxt;
cxt=iniciaCanvas("micanvas1");
if (cxt) {
ctx.strokeStyle = '#990000';
ctx.beginPath();
ctx.moveTo(50,15);
ctx.lineTo(112,15);
ctx.lineTo(143,69);
ctx.lineTo(112,123);
ctx.lineTo(50,123);
ctx.lineTo(19,69);
ctx.closePath();
ctx.stroke();
}}
vii. Pintar dos caminos distintos
<canvas id="micanvas1" width="150" height="150">
</canvas>
<script>window.onload=function() {
//variable global contexto sin inicializar
var cxt;
cxt=iniciaCanvas("micanvas1");
if (cxt) {
//primer camino
ctx.beginPath();
ctx.moveTo(20,10);
ctx.lineTo(32,20);
ctx.lineTo(22,20);
ctx.lineTo(22,35);
ctx.lineTo(17,35);
ctx.lineTo(17,20);
ctx.lineTo(7,20);
//ctx.closePath(); opcional antes de un fill()
ctx.fill();


21

//creo un segundo camino
ctx.beginPath(); //probar a comentar esta lnea para ver lo que pasa
ctx.fillStyle = '#ff8800';
ctx.moveTo(47,50);
ctx.lineTo(67,70);
ctx.lineTo(67,30);
ctx.closePath();
ctx.fill();
}}
viii. Un camino que pinta en dos lugares distintos
<canvas id="micanvas1" width="150" height="150">
</canvas>
<script>window.onload=function() {
//variable global contexto sin inicializar
var cxt;
cxt=iniciaCanvas("micanvas1");
if (cxt) {
ctx.beginPath();
ctx.moveTo(20,7);
ctx.lineTo(32,20);
ctx.lineTo(22,20);
ctx.lineTo(22,35);
ctx.lineTo(17,35);
ctx.lineTo(17,20);
ctx.lineTo(7,20);
ctx.closePath();
//cambio el color de la lnea, el color cambia para todo el trazo
ctx.strokeStyle = '#ff8800';

//sigo en el mismo camino, pero muevo el puntero de dibujo
ctx.moveTo(47,50);
ctx.lineTo(67,70);
ctx.lineTo(67,30);
ctx.closePath();
ctx.stroke();
}}
IX. Dibujar arcos
i. El mtodo arc()
Un arco es una porcin de una circunferencia. Para dibujar un arco canvas tiene su propio mtodo, el cual
tiene en cuenta la circunferencia a la que pertenece. el mtodo arc() permite dibujar tanto un arco como
una circunferencia completa. Su sintaxis es la siguiente:
cxt.arc(<x>,<y>,<radio>,<ini_arco>,<fin_arco>,<giro)>;
El mtodo arc emplea 5 parmetros los cuales vamos a explicar a continuacin:


22

<x> y <y>: Estos parmetros indican las coordenadas del centro de la circunferencia a la que pertenece
el arco, siendo el primero (x) la coordenada o distancia horizontal, y el segundo la coordenada vertical.
<radio>: Este parmetro indica la longitud del radio de la circunferencia que contiene al arco.
<ini_arco>: Indica el punto de la circunferencia en el que empieza el arco. ste se mide en radianes. El
punto de inicio para medir el arco es el extremo derecho de la circunferencia, es decir, trazamos un
radio horizontal hacia la derecha, y este ser el punto 0. la medicin se hace siempre desde este punto
en sentido horario (el de las agujas del reloj).
<fin_arco>: indica el punto en el que finaliza el dibujo del arco. ste se mide tambin en radianes y tiene
el mismo punto de inicio para medirlos que el parmetro anterior.
<giro>: este parmetro es opcional e indica el sentido de giro en el que se dibujar el arco. Al contrario
de los anteriores, que son nmeros, ste es un parmetro booleano, y slo admite dos valores: false ,
valor por defecto, y que indica que se dibuja en sentido horario; y true , que indica que se dibuja en
sentido antihorario. Atencin: aunque el sentido del giro cambia, no cambian los parmetros anteriores
que miden el inicio y final del arco, estos se siguen midiendo en el sentido horario.

ii. Entender los radianes
Para comprender los gradianes de una manera ms visual, as como la referencia sobre el eje X, que seran
los cero grados, se puede ver la siguiente imagen:

En la imagen anterior tenemos varios valores de radianes:
0 Radianes seran cero grados y es el punto marcado por 0PI, en el eje de las X y a la derecha del
centro de la circunferencia.
0.5 PI Radianes seran 90 grados el punto del eje de las Y abajo del centro.
1 PI Radianes es media circunferencia, 180 grados.
1.5 PI Radianes sera el equivalente a 270 grados
2 PI Radianes son los 360 grados de la circunferencia completa y correspondera con el mismo punto
que los cero grados.
La circunferencia no es ms que un arco de 360 o 2PI radianes, por lo que dibujar una circunferencia
completa es lo mismo que dibujar un arco con este ngulo.
iii. Ejemplo de dibujo de arcos.
<canvas id="ejemplo1" width="220" height="220">
</canvas>
window.onload=function().
cxt=iniciaCanvas("ejemplo1");
if (cxt) {
cxt.beginPath(); //iniciar ruta
cxt.strokeStyle="blue"; //color de lnea
cxt.lineWidth=3; //grosor de lnea
cxt.arc(55,55,45,0,2*Math.PI); //crculo completo.
cxt.stroke();
cxt.beginPath(); //nueva ruta


23

cxt.arc(155,55,45,0,0.5*Math.PI,true); //arco de 3/4 de circunferencia
cxt.stroke();
cxt.beginPath(); //nueva ruta
cxt.arc(55,155,45,-30*Math.PI/180,-150*Math.PI/180,true); //otro arco
cxt.stroke();
cxt.beginPath(); //nueva ruta
cxt.arc(155,155,45,120*Math.PI/180,270*Math.PI/180); //otro arco
cxt.stroke();
}}

Vemos como los valores de los ngulos en los parmetros los hemos convertido en la mayora de los casos
de grados a radianes mediante la frmula n*Math.PI/180, incluso podemos poner ngulos negativos, los
cuales se miden en el sentido antihorario.
Observa como todos los ngulos se empiezan a medir en el extremo derecho del crculo, y en sentido
horario, aunque luego est marcado en ltimo parmetro que el arco se ejecute en sentido antihorario
(valor "true").
Al pasar de un crculo a otro debemos iniciar una nueva ruta, de lo contrario, se creara una lnea que une el
final de un crculo con el principio de otro.
iv. Dibujar figuras con arcos
Podemos tambin hacer figuras rellenas como crculos, semicrculos, sectores circulares, o arcos con color.
Para ello no tenemos ms que usar los mtodos para hacer lneas rectas moveTo() y lineTo() y si es preciso,
porque queremos poner contorno el mtodo colsePath(). Todos ellos vistos en pginas anteriores. Como
ejemplo hacemos un nuevo canvas en el que tomamos los arcos del anterior y lo ampliamos para que
podamos ver algunas figuras.
<canvas id="ejemplo2" width="220" height="220">
</canvas>
window.onload = function().
cxt2=iniciaCanvas("ejemplo2");
if (cxt2) {
cxt2.beginPath(); //iniciar ruta
cxt2.strokeStyle="blue"; //color de lnea
cxt2.fillStyle="red"
cxt2.lineWidth=3; //grosor de lnea
cxt2.arc(55,55,45,0,2*Math.PI); //crculo completo.
cxt2.stroke();
cxt2.fill()
cxt2.beginPath(); //nueva ruta
cxt2.moveTo(155,55);
cxt2.arc(155,55,45,0,0.5*Math.PI,true); //arco de 3/4 de circunferencia
cxt2.closePath();
cxt2.stroke();
cxt2.fill();
cxt2.beginPath(); //nueva ruta
cxt2.arc(55,155,45,-30*Math.PI/180,-150*Math.PI/180,true); //otro arco
cxt2.closePath();
cxt2.stroke();
cxt2.fill();
cxt2.beginPath(); //nueva ruta
cxt2.moveTo(155,155);
cxt2.arc(155,155,45,120*Math.PI/180,270*Math.PI/180); //otro arco
cxt2.closePath();
cxt2.stroke();


24

cxt2.fill();
}}

Observa lo que hemos hecho para crear sectores circulares y arcos rellenos. Para crear un sector circular
movemos el puntero al centro de la circunferencia mediante moveTo(), despus dibujamos el arco con el
mtodo arc(), y cerramos la figura con closePath(). Para crear un arco relleno dibujamos el arco con el
mtodo arc(), y despus cerramos la figura con closePath().
v. Ejemplo de dibujo de caminos con arcos
Para que se pueda entender el mtodo con el que se crean caminos complejos a base de arcos en el
elemento Canvas, vamos a presentar el siguiente ejemplo, en el que crearemos este sencillo diseo.

En realidad aunque parezca una figura un poco compleja de hacer, se consigue con dos caminos. El primer
camino se rellena con color negro y el segundo con color naranja. En la siguiente imagen se puede ver de
una manera ms clara los caminos que habra en para hacer ese diseo.

El primer camino tiene dos arcos concntricos, uno con radio mayor y el segundo con un radio menor. Este
primer camino comienza en el radio mayor y se puede ver una lnea gris que hemos puesto, con unas
flechas, para poder reconocer la direccin que lleva el camino.

<canvas id="ejemplo1" width="220" height="220">
</canvas>
window.onload=function().
cxt=iniciaCanvas("ejemplo1");
if (cxt) {
//primer camino, en negro
ctx.beginPath();
ctx.arc(75,75,60,Math.PI,Math.PI*0.5,false);
ctx.arc(75,75,32,Math.PI*0.5,Math.PI*1,false);
ctx.closePath()
ctx.fill();
//segundo camino, en naranja
ctx.fillStyle = '#ff8800';
ctx.beginPath();
ctx.arc(75,75,15,0,Math.PI*2,false);
ctx.fill();
}}


25

X. Curvas de Bzier
i. Curvas cuadrticas
Las curvas de Bzier son un tipo de curvas usadas a menudo en diseo grfico. No son arcos ya que la
curvatura depende de la distancia que hay entre los puntos de inicio y final y otros puntos de control.
El tipo ms simple de curva de Bzier es la curva cuadrtica. Esta viene definida por tres puntos, un punto de
inicio, un punto de final y un punto de control. El punto de inicio y de final, marcan el principio y el fin de la
curva, mientras que el punto de control, es un punto exterior a la misma que marca el grado de curvatura.
Para mayor claridad, visitar http://es.wikipedia.org/wiki/Curva_de_B%C3%A9zier
Por lo tanto necesitamos tres puntos para definir una curva cuadrtica, el de inicio, el del final y el de
control.
ii. Mtodo QuadraticCurveTo()
El mtodo QuadraticCurveTo() permite realizar curvas cuadrticas. Este mtodo tiene la siguiente sintaxis:
cxt.quadraticCurveTo(<controlX>,<controlY>,<finX>,<finY>);
El mtodo da por supuesto que hemos puesto con anterioridad el primer punto de la lnea mediante un
moveTo(), un final de otra lnea (lineTo()), etc. Por lo que este punto no lo indicamos. Los dos primeros
parmetros indican las coordenadas X e Y del punto de control, y los dos parmetros tercero y cuarto
indican las coordenadas X e Y del punto final de la curva.
<canvas id="ejemplo1" width="200" height="200">
</canvas>
window.onload = function().
cxt=iniciaCanvas("ejemplo1");
if (cxt) {
cxt.beginPath(); //iniciar ruta
cxt.strokeStyle="red"; //color de lnea
cxt.lineWidth=5; //ancho de lnea
cxt.moveTo(15,180); //punto de inicio de curva
cxt.quadraticCurveTo(130,5,180,160); //dibujar curva
cxt.stroke(); //visualizar
}}

Tal vez la principal dificultad no est en el cdigo, sino en elegir el punto de control para que la curva sea
como nosotros queremos. Es posible que tengamos que probar varias veces, e ir cambiando el punto hasta
que la curva tome la forma que queremos.
iii. Curvas cbicas de Bezier.
Como hemos dicho antes las curvas cuadrticas son la forma ms simple de curvas de Bezier, Tenemos
tambin las curvas cbicas, las cuales tienen dos puntos de control. La curva tiene dos puntos de control, P1
y P2, Observa cmo se van recorriendo las lneas mientras se forma la curva.
iv. Mtodo bezierCurveTo()
El mtodo bezierCurveTo() crea una curva cbica de Bezier, su sintaxis es parecida a la del
mtodo anterior.
cxt.bezierCurveTo(<controlX1>,<controlY1>,<controlX2>,<controlY2>,<finX>,<finY>);
Al igual que el anterior mtodo, el punto de inicio viene dado por la posicin del puntero, por lo que no hay
que ponerlo en los parmetros. Los parmetros de este mtodo son los siguientes:
<controlX1>,<controlY1> : Coordenadas X (horizontal) e Y (vertical) del primer punto de control.
<controlX2>,<controlY2> : Coordenadas X (horizontal) e Y (vertical) del segundo punto de control.
<finX>,<finY> : Coordenadas X (horizontal) e Y (vertical) del punto final de la lnea.




26

<canvas id="ejemplo2" width="200" height="200" >
</canvas>
windows.onload=function().
cxt2=iniciaCanvas("ejemplo2");
if (cxt2) {
cxt2.beginPath(); //iniciar ruta
cxt2.strokeStyle="maroon"; //color de lnea
cxt2.lineWidth=5; //ancho de lnea
cxt2.moveTo(50,180); //punto de inicio
cxt2.bezierCurveTo(10,40,120,-30,190,190); //curva de Bezier
cxt2.stroke(); //visualizar.
}}

Como en las curvas cuadrticas tal vez la mayor dificultad est en elegir los puntos de control para que la
curva tenga el aspecto que nosotros queremos. Puede que tengamos que probar e ir cambiando los puntos
en nuestro cdigo e ir comprobando cmo quedan en la pgina hasta obtener el aspecto deseado.
v. Ejemplo de curva cuadrtica
<canvas id="ejemplo2" width="200" height="200" >
</canvas>
windows.onload=function().
cxt2=iniciaCanvas("ejemplo2");
if(ctx){
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.moveTo(10,60)
ctx.quadraticCurveTo(10,10,60,10);
ctx.lineTo(120,10);//Linea que va desde el punto 60,10 hasta el punto 120,10
ctx.lineTo(120,50);//Linea que va desde el punto 120,10 hasta el punto 120,50
ctx.quadraticCurveTo(120,110,60,110);//Arco que parte de 120,50 hasta 60,110
ctx.lineTo(10,110);//linea desde 60,110 hasta 10,110
ctx.closePath();
ctx.stroke();
ctx.fill();
}}