HTML5

Dibujar cuadrados en canvas con Java Script

En este tutorial aprenderemos a dibujar cuadrados en canvas con Java Script. Como todos sabemos canvas es una etiqueta HTML5 que permite crear gráficos dinámicamente por medio del lenguaje de programación Java Script. Los gráficos pueden ser estáticos o simples animaciones. Además es importante saber que solamente los navegadores modernos soportan esta característica.

Cómo dibujar cuadrados en canvas con Java Script

Como primer paso tenemos que definir la etiqueta canvas en nuestro HTML de la siguiente forma.

<canvas id="micanvas" width="200" height="200">
  Contenido que sólo verán los usuarios que no soportan canvas en su navegador.
</canvas>

Luego en Java Script vamos a obtener el contexto del elemento canvas para poder dibujar.

var elemento = document.getElementById("micanvas");
var contexto = elemento.getContext('2d');

Finalmente para dibujar un cuadrado solamante debemos usar la funcion fillRect(x, y, width, height) del contexto:

contexto.fillRect(100, 100, 50, 50);

Si visualizamos el cuadrado en el navegador el resultado sería el siguiente:

Cuadrado en canvas

Cuadrado en canvas

Ahora si queremos cambiar el color del cuadrado solamente debemos utilizar el atributo fillStyle con el color hexadecimal:

contexto.fillStyle = "#FFBD16";

A continuación el código completo:

<!DOCTYPE html>
<html>
  <head>
    <title>Dibujar cuadrados en canvas con Java Script</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
  </head>
  <body>
    <canvas id="micanvas" width="200" height="200">
      Contenido que sólo verán los usuarios que no soportan canvas en su navegador.
    </canvas>
    <script language="JavaScript">
      window.onload = function(){
      	var elemento = document.getElementById("micanvas");
      	var contexto = elemento.getContext('2d');
		contexto.fillStyle = "#FFBD16";
      	contexto.fillRect(100, 100, 50, 50);
      }
    </script>
  </body>
</html>

Bueno gente, eso es todo lo básico que se necesita para dibujar cuadrados en canvas con Java Script. Espero que les sea de gran utilidad y ante cualquier problema no duden en enviar un comentario.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *