Tutorial Canvas: Dibuja en tu navegador usando HTML, CSS y JavaScript

Tutorial Canvas: Dibuja en tu navegador usando HTML, CSS y JavaScript
En este tutorial te enseño a desarrollar una pizarra para que tus usuarios puedan hacer dibujos (como en paint) desde el navegador usando solo HTML, CSS y Javascript a través de la API de Canvas.
Recursos:
==========
Repositorio: github.com/ped...
Referencias: developer.mozi...
Redes:
==========
Twitch: / programacion_en_esp
Instagram: / programacion.es
Facebook: / programacion.en.esp
Discord: / discord
Twitter: / prog_es

[@JUAN_Pe_08]

Increíble, sencillo, rápido, y practico. 10/10 🤯

[@programacion-es]

Mil gracias!!

[@pablinmda]

Muchas gracias!!! Estoy iniciando en JS este año y me encanto como enseñas! nuevo sub

[@programacion-es]

Mil graciaaaas! Me alegra que el contenido te sea útil, un saludo y que tengas buen código!!

[@nelsonricardoramirezgarcia9203]

Desde Colombia, gracias, me sirvió mucho tu tutorial. 👍

[@programacion-es]

Muchísimas gracias a ti! Me alegra que te haya sigo útil, un saludo y que tengas buen código!

[@Brian-ct7np]

Muy buen tutorial !!💯

[@programacion-es]

Mil gracias!! 😎🤘🧑‍💻

[@Lashistoriasdelilith]

fantástico!, me encantó hacerlo, muy bueno

[@programacion-es]

Esooo me alegra un montón que te haya gustado =)

[@mariomelendez1682]

Te lo agradezco mucho, me ha servido, like

[@programacion-es]

Muchas gracias por tu comentario, me alegra que te haya sido útil! Un saludo y que tengas buen código!

[@stavgraff]

Es posible guardar lo que dibujo en una extención png y jpg?

[@programacion-es]

Si que puedes, te dejo un repositorio con una versión de la pizarra más completa que hicimos en directo y tiene la opción de exportar a jpg en el archivo js =) github.com/pedrovelasquez9/paintee

[@stavgraff]

@@programacion-es gracias !!! muchas gracias sigue subiendo mas información de programció los veré porque son buenos tus videos!!

[@programacion-es]

@@stavgraff Mil gracias a ti por el súper comentario!! =)

[@thankful777]

Muchas Gracias!

[@programacion-es]

Gracias a ti por comentar! Un saludo y que tengas buen código!!

[@jimmypedraza433]

Con esto también puedo dibujar cuadros de textos y que dichos cuadros vayan creciendo dependiendo de que tan grande es el texto que escribe el usuario?

[@programacion-es]

Mmm, para eso usaría un textarea y modificas las propiedades css de acuerdo a la longitud del texto ingresado

[@zattner9350]

muchas gracias estuvo perfecto claro facil y efectivo

[@programacion-es]

Muchas gracias a ti por el comentario!! Un saludo y que tengas buen código!

[@jpalma76]

esta bueno, gracias, lo he estado haciendo toda la tarde y sabes le encontré un bug, si sales del canvas con el couse apretado y lo sueltas afuera y vuelves al canvas el evento de mouseup no se detecta y cuando vuelves sigue haciendo la raya. Se puede solucionar esto???

[@programacion-es]

Esooo, muchas gracias por reportar el bug, en cuanto pueda le echo un ojo y actualizo el repo con el fix =)

[@anthonycozcalumani878]

buen video, consulta y como se puede grabar en un server lo que se ha dibujado

[@programacion-es]

Hola Anthony, me alegra que te haya sido útil, para subir la imagen a un servidor podrías usar fetch y enviar la imagen con el método post en formato base64, te dejo un artículo que quizás te ayude con estos dos últimos pasos =) formcarry.com/blog/how-to-upload-files-as-base64/ un saludo y que tengas buen código!

[@alexandrohdez3982]

👏👏👏👏👏👏

[@josemariadiy6400]

Hola, buen tutorial 👍 Pero cómo puedo dibujar, por ejemplo una chincheta o marcador, encima de una imagen...??🤔🤔 Por ejemplo colocar un marcador encima de la imagen del piso de una casa (plano)..…..... Agradecería tu respuesta.

[@programacion-es]

Mmm, en principio se me ocurre que podrías setear el background del lienzo para que fuese la imagen que necesitas y pintas sobre ella

[@Holmen3055A]

tu tutorial me sirvio mucho, gracias! :D

[@programacion-es]

Mil gracias a ti por comentar, me alegra un montón que te haya sido útil =)

[@vectalord]

Buenisimo! quiero agregar un boton para descargar de manera local lo dibujado, uso toDataURL y demas, pero me descarga el canvas en negro. Alguna idea de por qué?

[@programacion-es]

Mmm lo primero que se me ocurre es que esté referenciando mal el canvas, al no encontrarlo, te genera una imagen vacía, échale un ojo a los selectores para asegurarte que no sea eso =)

[@soportetecnicopinsa2]

Hola, me podrias apoyar con una duda que tengo Por que sirve de diferente manera si le damos el ancho y el alto desde el css a que si se lo damos desde el mismo html como atributos Con este codigo no me aparecia nunca lo que ingresaba con el mouse: canvas { background-color: #ccc; margin-top: 2em; width: 900px; height: 900px; } Sin embargo al ingresarlo desde html funciona sin problemas

[@programacion-es]

Si has seguido el tutorial, esto pasa porque el tamaño lo asignamos vía JS directamente al elemento canvas, al asignar el tamaño directamente en el tag, éste lo sobrescribe porque es el equivalente a cambiar lo que ya está, y esto tiene prioridad sobre los cambios a través del selector CSS

[@Fenizdarkness]

Raro, no me quiere servir la función mouseUp() para que deje de trazar la línea en el canvas. ¿Es algo qué sucede por usar Visual Studio Code o será algo del navegador?

[@programacion-es]

Mmm, no creo que sea cosa del editor o del navegador, revisa la consola de chrome a ver si no tienes algún error de sintaxis en el script

[@Fenizdarkness]

@@programacion-es lo he hecho desde Mozilla Firefox y desde Google Chrome. Reproduje el vídeo varias veces para entender el error. Luego, hoy, mirando con detalle el código digitado, encontré lo siguiente: mainCanvas,removeEventListener("mousemove", mouseMoving); Por esa simple coma, dentro de la función mouseUp(), no dejaba de trazar una vez dejaba de presionar el clic izquierdo del mouse. Bueno, gracias igualmente por la ayuda.

[@programacion-es]

@@Fenizdarkness Me alegra que hayas solucionado el problema, suele pasarnos bastante algún error de sintaxis =) un saludo!

[@sebasnpc6681]

buenas en mi caso necesito hacer un formulario y que puedan firmar 3 personas y para eso usé 3 canvas, cómo podría hacer que se pueda dibujar en los 3? saludos

[@lali0050]

🐋 gracias!

[@programacion-es]

Gracias a ti por comentar, espero te haya sido útil, un saludo y que tengas buen código!

[@joelcamus9836]

Hola, me funciona en una pc, pero si la ejecuto desde una table, movil, no me funciona, solo marca el primer punto, luego al arrastrar no me funciona, que puede ser?, gracias

[@programacion-es]

¡Hola! En efecto, este ejemplo es para web, no para versión móvil, planificaré una versión para móvil en nuevo vídeo =)

[@juanmanuelgutierrez3567]

funciona igual si estas navegando desde celular o tablet?

[@programacion-es]

Tal como está no, tendrías que agregar validaciones para manejar los drags al tocar la pantalla para que no lo tome en el móvil/tablet como scroll del navegador, tal como está solo te dejará "pintar" puntos en el canvas =)

[@elcondenadorestaurante5478]

si quiero dibujar usando las flechas del teclado, como puedo hacer para que también me permita hacer líneas diagonales?

[@programacion-es]

En este caso podrías partir de una coordenada central o inicial de tu preferencia, detectar las teclas con un evento keydown por ejemplo, validar la tecla que el usuario está presionando y aumentar/restar coordenadas según la tecla dibujando el trazo =)

[@elcondenadorestaurante5478]

@@programacion-es si ya tengo el evento y las coordenadas deseadas, como puedo poner una condición que se cumpla cuando estén precionadas un ejemplo ( Up, rigth ) que serían las flechas del teclado ??

[@jonathanpacheco7154]

Ya hice todo al pie de la letra y no me funciona:'c no dibuja nada, solo me funciona el HTML y css, el java es como que si no existiera y si está bien invocado

[@programacion-es]

Mmm, revisa la pestaña network de la consola de chrome para ver si te está cargando bien el js, si no, puedes pasarte por los directos de twitch y le echamos un ojo para ayudarte =) un saludo!

[@edwardcamilorodriguez9415]

Alguien sabe porque no se puede instalar el cangas-sketch global desde la terminal de un MacBook?

[@programacion-es]

No trabajo con Mac, pero puedes preguntar en los canales de ayuda de nuestro servidor de Discord a ver si alguien ha tenido el mismo problema =) aquí el link para unirte al servidor discord.com/invite/29UMrr933p

[@davidarias5525]

Muchas gracias amigo, y como podrías eliminar lo dibujado

[@programacion-es]

Algunas formas que se me ocurren: podrías hacer un borrador igualando el color del pincel al color del background, también podrías ir guardando los trazos para deshacerlos o simplemente hacer un clear reiniciando el canvas =)

[@JulioCesar-lq6qz]

Yo hice un cambio para que con un input number abiar el tamaño y el color xD del pincel

[@programacion-es]

Geniaaaal esa es la idea, mejorar el proyecto y adaptarlo a tu gusto, este tutorial luego lo expandimos en directo y el resultado fue esta web =) pedrovelasquez9.github.io/paintee/

[@EdgarRomero-ig9nc]

No sirve para la vista desde el móvil

[@programacion-es]

Tal como está, no, tendrías que agregar validaciones para manejar los drags al tocar la pantalla para que no lo tome en el móvil/tablet como scroll del navegador, tal como está solo te dejará "pintar" puntos en el canvas si lo usas en móvil =)

[@joelcamus9836]

@@programacion-es hola tengo el mismo problema, podrias mostrar el codigo, por favor para que funcione desde un movil?

[@programacion-es]

@@joelcamus9836 ¡Hola! En efecto, este ejemplo es para web, no para versión móvil, planificaré una versión para móvil en nuevo vídeo =)

[@ElMonoSka]

A mí me sirvió implementar los eventos touchstart y touchmove del mismo javascript y como es la misma función le pasamos el código anterior para que lo ejecute miCanvas.addEventListener('touchstart', empezarDibujo, false); miCanvas.addEventListener('touchmove', dibujarLinea, false);

[@pascualdas]

@@ElMonoSka hola, tienes el codigo completo, lo puse pero igual no funciona en smartPs