Create a simple drawing app using javascript and HTML5 canvas

Подписаться 13 тыс.

Просмотров 44 тыс.

50% 1

In this video, I'll show you how to create a drawing app using javascript and HTML5 canvas. By the end of the video, you'll have a basic understanding of the canvas and how to work with it using javascript. You'll also learn the basics of event handling within the browser.
Source code: codepen.io/jav...
Where you can find me?
🔗 Links:
🍺 Support free education and buy me a beer: ko-fi.com/adam...
💬 Discord: / discord
📧 Newsletter: www.getrevue.c...
✍️ Blog: dev.to/javascr...
🐦 Twitter: / dev_adamnagy
📷 Instagram: / javascriptacademy

Опубликовано:

14 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 35

@muratusubaliev3533 3 месяца назад

Nice informative content! Thank you!. I was searching for the web technology behind web application in which user able to create shapes, duplicating them, copy/pasting, adding text box and move it/ resize it vice versa. Like in web apps: mapbox, figma, online powerpoint, lucid charts etc... I do not know where to start.

@samdavepollard 2 года назад

great job, Adam many thanks for sharing your knowledge subbed

@puno9585 Год назад

Hi! Is it possible to set the starting stroke color other different than black? Thanks a lot! Very nice video.

@jonnymoebjerg Год назад

Hi! In the .js file, put this in: //Set stroke HTML element value document.getElementById("stroke").value = "#ffd500"; //Set actual stroke color ctx.strokeStyle = "#ffd500";

@puno9585 Год назад

@@jonnymoebjerg Thanks a lot, mate!

@jonnymoebjerg Год назад

@@puno9585 You are welcome! :) Feel free to ask me more questions.

@rayyanabdulwajid7681 9 месяцев назад

Can you please add a feature to use an eraser and erase the stuff that we want

@dejankarakasevic3791 2 года назад

This is amazing please keep it up

@JsAcademyOfficial 2 года назад

Thank you Dejan!

@zainul_abid Год назад

stratX and startY variable never use?

@hossamhatem6092 Год назад

hey dude , can you tell me the name of the VS CODE theme you use please?

@Adilxec 8 месяцев назад

can we add this app in our website ?

@uginh2rov798 Год назад

If you draw on a wacom tablet, then the line makes strange loops (first jumps forward, then takes a few steps back)

@blueberry1874 Год назад

is it possible to add a stabiliser to the line?

@oandrezin3091 6 месяцев назад

Sounds stupid, but how can i make it so the lines head the opposite way the mouse goes?

@phucphanhoang1918 2 года назад

I can't use it for mobile devices , you can help me ?

@marcfauve6971 Год назад

Merci Beaucoup :)

@Princeconceptdesigns Год назад

How can I add eraser

@BenoitAdam2 2 года назад

Nice, how to save the image then ?

@CanadianCatDaddy 2 года назад

get your phone, take a pic, and send to 5 friends for backup

@rohansharma555 2 года назад

How do you get the drawing to work on mobile devices?

@yashakayash4888 2 года назад

Use touchdown, touchmove and other touch events rather than using click, change etc....

@graybab Год назад

Replace "mousemove", "mousedown", etc. with "pointermove", "pointerdown", etc. etc. And don't forget to add: "touch-action: none;" to your css for the canvas or it'll be glitchy.