En este Informe USERS te enseñamos una forma sencilla para crear una pizarra interactiva con HTML5, JavaScript y CSS. Podrás elegir el color del trazo y su tamaño, así como también borrar y guardar en un archivo. A continuación, todos los detalles.
Autor: Fernando Diego Gamarra
Uso de canvas
Para comenzar con este proyecto, veamos primero los aspectos básicos que debes tener en cuenta para su desarrollo.
Empezaremos por explicar uno de los elementos centrales que permitirá realizar el proyecto. El elemento <canvas> es parecido al elemento <img>, con la diferencia de que no tiene los atributos src y alt, sino solo width y height. Ambos son opcionales y pueden definirse usando propiedades DOM (Document Object Model, Modelo de Objetos del Documento), que brindan otras formas de presentar, guardar y manipular este mismo documento.
Cuando los atributos ancho y alto no están especificados, el lienzo se inicializará por defecto con 300 píxeles de ancho por 150 de alto. El elemento puede redimensionarse arbitrariamente con CSS, pero durante el renderizado, la imagen se escala para ajustarse al tamaño del layout.
Si el tamaño del CSS no respeta el ratio (relación de proporciones) del canvas inicial, este aparecerá distorsionado. Como buena práctica, es conveniente utilizar el atributo id, no especificado para el elemento <canvas>, pero uno de los globales de HTML, que puede aplicarse a cualquier elemento HTML (como class por ejemplo).
Siempre es buena idea proporcionar un id porque esto facilita su identificación en un script. A diferencia del elemento <img>, <canvas> requiere cerrar la etiqueta </canvas>. Veamos un ejemplo:
<html>
<head>
<title>Canvas ejemplo</title>
<script type=”text/javascript”>
function draw(){
var canvas = document.getElementById(‘tutorial’);
if (canvas.getContext){
var ctx = canvas.getContext(‘2d’);
}
}
</script>
<style type=”text/css”>
canvas { border: 1px solid black; }
</style>
</head>
<body onload=”draw();”>
<canvas id=”ejemplo” width=”150” height=”150”></canvas>
</body>
</html>
El elemento <canvas> crea un lienzo de dibujo fijado, que expone uno o más contextos renderizados, los cuales se usan para crear y manipular el contenido. En este informe nos enfocaremos en renderización de contextos 2D.
El canvas está inicialmente en blanco. Para que muestre algo, un script primero necesita acceder al contexto a renderizar y dibujar sobre él. El elemento <canvas> tiene un método llamado getContext(), que se usa para obtener el contexto a renderizar y sus funciones de dibujo. Dicho método toma un parámetro, el tipo de contexto. Para gráficos 2D, como los que se cubren en este tutorial, su especificación es 2d.
En esta ocasión veremos lo más básico, pero si quieres ampliar el tema, en RedUsers encontrarás una serie de libros de gran utilidad en el siguiente enlace: https://premium.redusers.com.
Si bien cualquier editor de texto serviría para trabajar, para acostumbrarte a hacerlo de manera profesional, para el desarrollo puedes usar, como en este caso, Visual Studio Code.
Puedes descargar la última versión desde VSCode (Visual Studio Code) en el siguiente enlace: https://code.visualstudio.com/download
Armar el proyecto: pizarra en HTML5
A continuación, veremos el desarrollo de la app para pintar y dibujar, que quedará 100% funcional. Con esto aprenderás la lógica del uso de canvas combinado con JS y CSS, para que puedas aplicarla a tus propios emprendimientos.
Para comenzar el proyecto, vamos a plantearnos los siguientes comportamientos que deberá tener:
- Cambiar el pincel o el color de la forma
- Personalizar el pincel
- Cambiar el ancho del pincel
- Cambiar el estilo del pincel (redondo, cuadrado, áspero)
- Cambiar entre pincel y forma
- Formas: rectángulo y triángulo
- Borrar
- Guardar a archivo
Ilustración de cómo quedará la app de dibujo en HTML5.
Otros temas que encontrarás si continúas leyendo el Informe USERS 235: el paso a paso de cómo crear tu primera pizarra interactiva, no te lo pierdas.
Informe USERS es una publicación digital semanal exclusiva para suscriptores de RedUSERS Premium, en ella analizamos en profundidad temas de actualidad en tecnología: tendencias, aplicaciones, hardware, nuevas tecnologías y más.
RedUSERS PREMIUM contiene cientos de publicaciones y puedes leerlas a todas, por una mínima cuota mensual SUSCRIBETE!
