Con los diferentes métodos de dibujo que se ven en el canvas es posible definir áreas dentro de los mismos para dibujar, aunque esto es un poco más complejo es totalmente factible, sin embargo tenemos también la posibilidad de lograr el mismo resultado utilizando el método clip().
Otro aspecto que también se puede incorporar dentro de los canvas es el dibujo de texto, tal vez pensamos que utilizando CSS y otros elementos podemos lograr dibujar un texto igual o de mejor aspecto, sin embargo al estar en el canvas nos permite aplicar animaciones nativas en HTML5.
Método Clip
Como mencionamos al inicio, este método nos simplifica la manera de cómo podemos crear una sección dentro de un canvas, para poder introducir otros elementos dibujados, como lo puede ser un nuevo dibujo o rellenarlo de un color especifico.
Para utilizar esta herramienta debemos llamar al método clip(), dicho método lo que realiza es crear una región de clipping o una nueva sección, veamos en el siguiente código como funciona:
En este código primero dibujamos un rectángulo grande en color amarillo, luego creamos una nueva región dentro de este utilizando el método clip() y dentro de dicha región generamos un nuevo rectángulo de color rojo.
Veamos cómo queda esto en nuestro navegador:
Dibujar texto
Podemos también dentro de un canvas dibujar texto, para ello disponemos de los siguientes métodos:
fillText(<text>, x, y, width): Dibuja y rellena el texto especificado en el primer parámetro <text> en la posición (x, y). Además, su argumento width es opcional pero cuando se declara, establece un límite para el ancho del texto.
strokeText(<text>, x, y, width): Dibuja y deja el texto sin relleno en la posición (x, y). Al igual que el método anterior en su argumento opcional hace que se limite el ancho del texto.
Veamos el siguiente ejemplo de cómo queda la utilización de estos métodos para dibujar texto en nuestro canvas:
En este código utilizamos ambos métodos para dibujar el mismo texto, ambos en la misma posición pero con diferente color con lo que logramos un efecto de un marco exterior de un color y un relleno de otro color, con ello podemos establecer una diferencia más marcada entre fillText y strokeText.
Por último y para finalizar este tutorial veamos como luce en el navegador.
Otro aspecto que también se puede incorporar dentro de los canvas es el dibujo de texto, tal vez pensamos que utilizando CSS y otros elementos podemos lograr dibujar un texto igual o de mejor aspecto, sin embargo al estar en el canvas nos permite aplicar animaciones nativas en HTML5.
Método Clip
Como mencionamos al inicio, este método nos simplifica la manera de cómo podemos crear una sección dentro de un canvas, para poder introducir otros elementos dibujados, como lo puede ser un nuevo dibujo o rellenarlo de un color especifico.
Para utilizar esta herramienta debemos llamar al método clip(), dicho método lo que realiza es crear una región de clipping o una nueva sección, veamos en el siguiente código como funciona:
<!DOCTYPE HTML>
<html>
<head>
<title>Ejemplo</title>
<style>
canvas {border: thin solid black}
body > * {float:left;}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="140">
Su navegador no es compatible con el elemento <code>canvas</code>
</canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.rect(0, 0, 500, 140);
ctx.fill();
ctx.beginPath();
ctx.rect(100, 20, 300, 100);
ctx.clip();
ctx.fillStyle = "red";
ctx.beginPath();
ctx.rect(0, 0, 500, 140);
ctx.fill();
</script>
</body>
</html>
En este código primero dibujamos un rectángulo grande en color amarillo, luego creamos una nueva región dentro de este utilizando el método clip() y dentro de dicha región generamos un nuevo rectángulo de color rojo.
Veamos cómo queda esto en nuestro navegador:
Dibujar texto
Podemos también dentro de un canvas dibujar texto, para ello disponemos de los siguientes métodos:
fillText(<text>, x, y, width): Dibuja y rellena el texto especificado en el primer parámetro <text> en la posición (x, y). Además, su argumento width es opcional pero cuando se declara, establece un límite para el ancho del texto.
strokeText(<text>, x, y, width): Dibuja y deja el texto sin relleno en la posición (x, y). Al igual que el método anterior en su argumento opcional hace que se limite el ancho del texto.
Veamos el siguiente ejemplo de cómo queda la utilización de estos métodos para dibujar texto en nuestro canvas:
<!DOCTYPE HTML>
<html>
<head>
<title>Ejemplo</title>
<style>
canvas {border: thin solid black}
body > * {float:left;}
</style>
</head>
<body>
<canvas id="canvas" width="350" height="140">
Su navegador no es compatible con el elemento <code>canvas</code>
</canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
ctx.fillStyle = "lightgrey";
ctx.strokeStyle = "black";
ctx.lineWidth = 3;
ctx.font = "100px sans-serif";
ctx.fillText("Hello", 50, 100);
ctx.strokeText("Hello", 50, 100);
</script>
</body>
</html>
En este código utilizamos ambos métodos para dibujar el mismo texto, ambos en la misma posición pero con diferente color con lo que logramos un efecto de un marco exterior de un color y un relleno de otro color, con ello podemos establecer una diferencia más marcada entre fillText y strokeText.
Por último y para finalizar este tutorial veamos como luce en el navegador.
