CANVAS JavaScript Drawing App 🎨 | Draw ● Undo ● Erase ● Colors | Full HTML5 Canvas App Tutorial

[@BananaCoding]

The Timelaps :) 00:00 - 00:42 Introduction 00:43 - 03:09 Building the HTML construct 03:10 - 08:10 Styling with CSS 08:11 - 10:46 JS define Canvas variables and settings 10:47 - 17:03 Drawing functions 17:04 - 20:20 Changing colors + color picker + pen size 20:21 - 21:55 Clear full canvas field 21:56 - 27:20 Undo paths and writings / drawings 27:21 Outro

[@ienvyzerefjod]

How to draw on mobile using touch

[@w3cprogramming678]

how can add redo button?

[@arshiaiscool4069]

one of the best tutorials i have ever seen ,nice job!!

[@BananaCoding]

Thanks mate :)!

[@emausdetiquicia6636]

I've followed all your canvas tutorials and learnt a lot. Thanks for all the effort you put on those.

[@johnconley4955]

The first to put in a 'icon' link...found how to do this myself a few weeks ago, always good to do, makes it more personal...good vid

[@Alexis-gf6kf]

Hello, your tutorial is just perfect, exactly what I wanted, thank you very much and good luck for the future !

[@BananaCoding]

Thank you for that nice words, means a lot to me! :)

[@Alexis-gf6kf]

@@BananaCoding Hello, you're welcome, but do you know a system to make an eraser (not to erase everything but just erase around the cursor) to implement in your javascript? Thank you in advance for your reply !

[@BananaCoding]

Hey, sorry for the late answer. One way for erasing is simply to draw with the color white over the board, so it looks like an eraser :)!

[@Alexis-gf6kf]

@@BananaCoding Hello, thank you for your answer but, in fact, I would like to put an image in the background and be able to draw it, a bit like a painting. This is why the option to draw in white could not work. PS: Do you know a way to put an image or a pdf document in the background instead of white? Thank you for your response and sorry for any questions! Good continuation (Sorry for my English, I am French and I use Google Translate)

[@BananaCoding]

@@Alexis-gf6kf For the eraser, I found an good article on Stackoverflow: stackoverflow.com/questions/25907163/html5-canvas-eraser-tool-without-overdraw-white-color. I also already did an other video about canvas and images : kzbin.info/www/bejne/fGi4n3SLa5irn7s Hope this can help you! :)

[@nuraktar7815]

this is the best video in the youtube for drawing app ... thanks 4 the video

[@razarukhsar8479]

Yeye !I will do this Thankyo I'm glad to find your chennel really appreciate ✨good luck

[@tech_reforcae_mn]

Man, this tutorial is amazing, congrats!

[@AbdulWahab-pc5zl]

Thanks for the tutorial it was amazing but one extra thing I need is to add an option for background images can you help me out or anyone from the worthy audience

[@GFirehold]

This tutorial is awesome. Very clear and easy to follow. Maybe you can answerr me a question, is there an additional property to add, that the lines are smoother? And would it be hard to add an eraser-tool? And my most important question: whats the name of your VS Theme, i really like the colors :) Many Greets!

[@joelfigueroa7127]

one of the best tutorials out there! keep going pal!

[@sanchitbhasin4098]

very well explained 👏

[@Bintang240196]

This tutorial is awesome, i have implemented it in one of my projects. The only problem i got is, the touch event doesn't work on my Samsung Tablet running chrome. Can you check what is wrong?

[@hamzaaboulas3845]

i like it , and it worked for me , i had to tweek things alittle bit but its clear what he is saying , Thank you

[@codemagic2487]

The video is very good and helpful, exactly what I was looking for ! Good luck!

[@BananaCoding]

Thanks mate, nice to hear that! Wish you too.

[@hadi.edh7]

You are amazing man!! very enjoyable tutorial❤

[@sweethomes674]

Excellent techniques 😊

[@bayzidhossain7959]

sir can I save the drawing using save button ? If i do than please give us a tutorial on it. Thank You

[@NoBrainerLanguages]

Trying to come up with my own and it's the very first time in all these years that I can't get the line to spawn from the cursor. It draws anywhere bu from mouse position and I've been using the same simple logic since the ol' good VB6 lol. The offset is not being calculated correctly and I'm pretty much using the same basic principle this video and any other tutorial show. [EDIT FOR THE SOLUTION] first of all, the version where I edited canvas position and size using CSS and setting position as absolute messed up the entire tracking of the mouse cursor on the canvas. I created a second version with a canvas whose size was given in the HTML tag with integer numbers only (namely 800 and 600) and the same code from the first attempt worked. However, in order to have the same effect as seen in this video, I had to move the "moveTo" method to the mousedown event and leave the "lineTo" method in the scope of the function being called by the onmousemove event. In other words, positioning of the canvas and units used will hurt the accuracy. In order to have a line that follows the mouse as freehand style (not a straight line from point A to point B) we must separate the "moveTo" and "lineTo" methods. I even tried, just to make sure, call both in the onmousedown event and it fails again. "lineTo" AND canvas.stroke methods must be BOTH in the onmousemove event, conditioned by a boolean flag that confirms the mousedown event is taking place (meaning user is trying to draw). Unless, of course you want the line to only be visible when the mouseout takes place instead of a realtime line being drawn. In that case you want to delay the result, just call the canvascontext.stroke() in the onmouseout event. If you call it in the onmousedown event, you'll have an even longer delay as the line you just drew will only show when you start a mousedown event to start a new line. The biggest problem, in conclusion, is that if you want to create a nice drawing tool, the positioning of the canvas and other elements of your page will give you an enormous headache.

[@jurygans719]

Hello, You have a bag in the undo_last function. -> function undo_last() { if(index

[@BananaCoding]

Hello, thanks for your advice!

[@luuufe8484]

How do I create a redo function?

[@thecsspage5603]

That's something I was looking for 🔥🔥🔥 thanks

[@BananaCoding]

Thanks, nice to hear that!

[@LunchboxdadioMusic]

With newer javascript you may need to add window.change_color = change_color; in your javascript file to get the HTML onclick to work

[@GeNoZiKs]

Hey ! The color buttons don't seem to work for me, in which line of the javascrisp file I should put this please ? (Complete beginner here sorry !)

[@nileshvishwakarma118]

Bro, this video is awesome. Can you add fill button which can fill the drawing with colour?

[@andreasofficiall]

Now I realise I know nothing about Javascript XD, no but really amazing video! Thanks for the tutorial :)

[@BananaCoding]

Thank you! :)

[@zahidshaikh3122]

Great content, Thanks a lot!

[@DeveloperRimon]

Good job man!!!!

[@tehyanyang6959]

lovely video ive learned alot from this thank you :)

[@BananaCoding]

Thank you :)!

[@sadsadsad5000]

based, thanks for the video

[@whome4860]

you are the best ... thanks

[@twiztidstaticx7618]

Great Tutorial. I can not get the image to save though. Can you show how to save to local storage on mobile?

[@halfcookedramen]

try the getDataURL() property. This transforms the canvas into a "data:image/png:base64,iViVBORw0KGgoAAAANSUhEUgAAAZ..." link. This can be read by your browser and put in localStorage. Then, onload, try placing the image in the canvas.

[@supermauz]

best tutorial Ever!

[@BananaCoding]

Thank you!!

[@eguchiyuuki]

great!

[@Vlada97my]

could this be done so it could be like an interactive white board? i'm aiming to do something like thous drawing online games.

[@chigozieobialor1245]

I've got a link 4U :) m.kzbin.info/www/bejne/eKOXppSOfdeCesk

[@genaromartinezcarrer]

Amazing tutorial! but I have a problem... When I try to create the undo function it doesn't work for me, the console gives me this error "Failed to execute 'putImageData' on 'CanvasRenderingContext2D': parameter 1 is not of type 'ImageData" What can I do to solve this?

[@larryshamala8929]

hi, thank you for your good work. i request you help us with your full codes for the tutorials so that we may understand better

[@BananaCoding]

Hi, thanks sir, here the code for you: codepen.io/BananaCoding/pen/mdrGjpL

[@sanjayr.prajapati3496]

Helpful. Can you make a video on drawing shapes like square and circle?

[@BananaCoding]

Thanks for that! I already did a video series about canvas where I did that. Here is the first video: kzbin.info/www/bejne/pmmbo4GZoMiWo8k

[@sanjayr.prajapati3496]

@@BananaCoding Thanks for the reply. But what I want is that when user starts drawing square, the drawing effect should been seen. Means from mouseDown to mouseUp square should scale. I hope you understand what I am trying to say.

[@BananaCoding]

Yes, I think I know what you mean. I found this on CodePen, might help you maybe: codepen.io/AllenT871/pen/GVyXKp (use on computer)

[@kvnp9683]

How to check the drawn diagram with parameters and return reviews based on it??? Please Help!!!

[@jonesmichael7799]

Great tutorial! I have one problem, the touch event isn't working on my mobile devices and I've tested on multiple browsers. Any advice?

[@BananaCoding]

Thanks! Most of the actions use the HTML attribute „onClick“, maybe try also „onTouch“ :)

[@BananaCoding]

Here is the code, it works mobile: codepen.io/BananaCoding/pen/mdrGjpL

[@hamidomar350]

@@BananaCoding Yeaa!!! good shit XD thanks @Jones Michael for asking this. I don't know crap about web dev and wouldn't have been able to solve this on my own...

[@techiejay2k23]

Will you please tell how to write code for working of Redo button?

[@BananaCoding]

You can save the deleted Item in another array. If you click on the button, take the item and „redraw“ it!

[@techiejay2k23]

@@BananaCoding Thank you

[@luuufe8484]

@@techiejay2k23 You got it?

[@techiejay2k23]

@@luuufe8484 Yes, but it's not working completely fine

[@amitsolanki9363]

How can i save canvas to image that uses s3 image it give me error Uncaught SecurityError: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’: The canvas has been tainted by cross-origin data

[@ThaoNguyen-lj6qn]

Is there a way to make this detectable witih a tablet pen?

[@markystudio14]

is it possible to create a multiple layer of canvas with a transparent background? what i mean is what we already see to other software that you can sketch with multiple layer of drawings? just like, overlay, line-art, color art, underlay, layers. by the way this is grate! keep up

[@markystudio14]

i noticed when i add the touch stop event , the touchstart or touchend somewhere, is not working on my tablet. why is that happening?

[@BananaCoding]

Maybe this helps you, here is the code: codepen.io/BananaCoding/pen/mdrGjpL

[@mesmartboy1985]

What about erase??

[@xVroft]

can i somehow import an black and white picture to this so you could color it ?

[@ZeroChenKun]

May I get the source code, after watching this video, I want to start it myself,but GOT some .....,

[@BrandonPetaccio]

How can we now save the image? specifically, save it to a mysql database?

[@mayanktripathi4u]

Did you got how to save the canvas image? If so please do share.

[@BananaCoding]

Hey you can save it with this function: function Save(a) { var img = canvas.toDataURL('image/png'); a.href = img; } Just bind the function to a button with the attribute onClick=„Save(this)“

[@twiztidstaticx7618]

@@BananaCoding I can not get the image to save using this?

[@waiyingcheung2639]

@@twiztidstaticx7618 me too, how can you solve this?

[@jakubpetrik4997]

@@BananaCoding Can someone solved it ?

[@ramlaaal]

what theme are you using,

[@Gs0c]

what is writed on the "integrity" line?

[@abubuckerm4934]

It is really nice job. How can we add Redo option?

[@halfcookedramen]

i guess add another list with everything in there? don't take anything out of the list, just navigate it.

[@rosamariajerez2513]

How can i draw and crop one irregular each of a image with JS, JQuery or python? thank u!!

[@rosamariajerez2513]

i want create a image, start of other image... i was find this for circle, square, triangle etc... but i don´t get for irregular forms

[@platinum5501]

Hello BananaCoding, so the canvas color change drawing for the onClick doesn't work. Can you help me out?

[@BananaCoding]

Hi! Which error message do you have in the console?

[@platinum5501]

@@BananaCoding Oh, nevermind, i was able to have the problem fixed. I didn't save the project! But still thanks for responding! Also, great tutorials! :D

[@BananaCoding]

Nice to hear, thank you! :)

[@haseebbbb]

its not letting me draw

[@1Clashio]

Hello! Thank you everything went well. I changed the width in JavaScript: canvas.width = 800; But I need that canvas in a different position so I added to the css file .field { position: absolute; left: 330px; top: 500px; } Now the problem is that when I draw in a point inside the canvas it draws like 150px bellow my mouse. Can i fix that so it could draw exactly where I click my mouse?

[@BananaCoding]

Thank you! I know what you mean, don’t try to work with position: absolute. Try to change the position with Flex layouts or margin!

[@1Clashio]

@@BananaCoding Okay thank you for replying. I'm gonna search up how to do that

[@1Clashio]

@@BananaCoding I changed the position with margin it works well when I'm at the top of the window, but if I scroll a little bit down the drawing will be off. Now i need to be at the top of the page to be able to draw without it being a few centimeters off. And that doesn't work for me

[@NoBrainerLanguages]

I suspected that was the issue. After all these years, HTML doesn't have a decent standardized way to measure things, so drawings and fonts are the worst dev nightmare to finally set up.

[@1Clashio]

@@NoBrainerLanguages Thank you, for your help!

[@vishaliniraja]

Haii your video superb can you share the code please

[@BananaCoding]

Thanks, sure codepen.io/BananaCoding/pen/mdrGjpL

[@KhaledBis-q4e]

Arabic support is possible, good luck

[@레오-v2g]

What is right panel execute canvas?

[@BananaCoding]

Hey, can you explain what you mean?

[@레오-v2g]

@@BananaCoding Wow. Never mind. I was mistaken.

[@sibanandaparida4878]

What theme do you use??

[@BananaCoding]

One Dark Pro

[@sibanandaparida4878]

By the way such an amazing explanation brother…Keep it up 👍🏼

[@BananaCoding]

Thank you, that means a lot to me :)!

[@russell_talent]

@@BananaCoding and what font and size bolt? :) theme One Dark Pro slightly different

[@tyresezaid6212]

Good. I wait for love from you 💝💖

[@BananaCoding]

Thank you

[@sonnguyen1197]

How can we remove line in your canvas?

[@BananaCoding]

One easy way is to overwrite with white color

[@DUYNguyen-kn6xg]

set globalCompositeOperation = 'destination-out', this basically turns your context2D into an eraser

[@ayushrautela8567]

@@DUYNguyen-kn6xg can you please help I am not able to implement it🙏

[@yt-spikegaming7394]

where is erase?

[@nayabmannan6470]

source code?

[@larryshamala8929]

I am unable to draw.

[@NG15427]

it's a bad habit to add javascript in your html... you should have added all event bindings in your js file.

[@BananaCoding]

Yes, this is just for demo purposes

[@divyjain490]

can you give the code link

[@BananaCoding]

Sure, codepen.io/BananaCoding/pen/mdrGjpL

[@divyjain490]

@@BananaCoding can you give a code of the same in react and node where changes made on one browser reflect on another with socket and a eraser and basic shapes ,it will be very helpful if you can provide that

[@bhaitabahi786]

sir can u upload the source code pls

[@BananaCoding]

Sure, here you find it: codepen.io/BananaCoding/pen/mdrGjpL

[@naturessound4672]

Please send source code

[@haseebbbb]

send source code

[@Phongtutorial]

Source Code

[@webdbase]

See the anwser to Bhai tabahi