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

hello there boys and girls and welcome back to this brand new video my name is phil and in this tutorial we're going to build a drawing app using canvas in html and javascript to another javascript no library or something else like that we're going to use the um drawing app to draw with our mouse or with our touch on on mobile phones on the on the screen and also we can change the color here and throw another color we can change the pen width uh by range and also we can clear the whole troll field and also undo the last actions have fun watching the video right now and let's go [Music] so we're gonna start here in our index.html we already built a little basic html construction here and we included the styles.css and the main.js which is actually empty these styles.css only contains some basic body stuff like the background and on the right side here we're going to see the preview here on our browser so let's dive into it right now which is going to create a div with the classic field and inside that field we're going to create the canvas with the id of canvas and also we're just going to create a new div container with the class of tools and inside that we're going to put in the buttons and the color changer fields or something like that so first things first we're going to say button and type is equal to a button here and we'll give it a class of also a button and what we can do in right here is for example undo and a second button here for clear after that we're going to create the fields to change the color we're going to use the div container with class of color minus fields and we're going to style that inline so we give it a background of let's say background is equal to red um yeah we're going to use four colors here in our case just for tutorial reasons so you can of course use more or other colors i'm going to use red blue green and also yellow and yeah in the end we're just going to put in here some inputs with the type of color so this will be color picker a basic html color picker and we give it a class of color minus picker and after that we're going to create another input with the type of range which needs min and max value and min values should be greater than zero so we use one and max value will be in our case here for example 100 and also a class of let's say pen minus range so if we refresh that you actually will not see something here and the canvas because we didn't give it a whiff and the hate and you will only see here the little inputs here so what we need to do next is um we need to style those color fields and the canvas um we're gonna go inside our start set css we only got some basic body stuff and inside here which is gonna uh style the color field so you can say tools and dot column minus field and inside here you just can say something like height or 40 pixel width of 40 pixel also give it a min hey so it will not be smaller than 40 pixel also for the width of 40 pixel and we can say cursor pointer and if we refresh that you will see that here are our four colors and what we can do next is display set to inline block so they will be all in one row also we can say cursor set to pointer so it's more reciprocal for the user that you can do something and interact with those fields and yeah let's say something like uh box manage sizing equal to border box and also to make it round you're going to say boredom minus radius is equal to 50 so um it will look like this and we're gonna give it a border of two pixels solid white all right here we go and so far so good um what we need to change next is we have here our tools field in html so we're just gonna style it a little bit i'm not started we're gonna just give it the display of flex so we just can say that justify content center that the whole content will be in the middle and also in the vertical and alignment will be uncentered and what we can say it's already done but we're going to clear it here as flex direction oh i closed it as flex flex direction minus row and also uh so that is not directly on the canvas here we're just going to say march and minus top arm off let's say something like 50 pixel 50 pixels worth so and color field also will get line minus self center so it will be full centered here cool so good um after that we're just going to style the button a little bit here so we're going to say the tools dot button and here also we're going to say line minus f will be center and we're just going to give it a width of let's say 100 pixel um a height of 40 pixel um also border of um two pixel solid right um cursor is also pointer i'm gonna say the color is white i'm gonna say the background um is equal to let's give it a dark black for example something like that uh sorry i mean something like this here a dark color and you're going to say front minus weight is equal to bolt so those are the buttons right now you can get a little margin of zero 15 pixels or to left and right it will has a little space um we could also do that for the color fields so i'm going to say margin is equal to 0 15 pixel and now it looks like this um of course we can also style those things here but we're gonna not use much time for that so we're just going to say that the color minus picker that's also an alignment self center to make it a alignment in a radical alignment and center and also margin of 0 and 50 pixel and a height of 50 pixel same for the pen minus range also here line minus self center and the margin of 0 15 pixel so it looks like this right now it looks a little bit weird here so let's make a little bit bigger i think that's okay here we can change the margin to uh 10 instead of 15 pixel so it takes a little bit less space here yeah here we go now it looks like this all right so we are already done with the styling we can just declare the canvas here and can give it a little border or a box shadow of black for example minus three pixel two pixel nine pixel six pixel on plaque yeah and also cursor pointer to make clear that this is a field where you can interact with and as you can see here right now this is our canvas and yeah we're going to style the width and height and also the background color in the javascript and that's what we're going to do now so in the javascript we just need to take our canvas field um we're going to do that by document.getelementbyid and if you remember we use the id of canvas so what we can do here is we can say canvas dot width is equal to window dot inner width and here we're just going to say minus 60 pixel so i just changed the server to live server here so if we do change something for example the background color you will immediately see the difference and the changes here so i don't need to refresh it all the time so but go we're going on here right now so we declared the canvas width to windows minus inner with -60 so it has 30 pixel left and right space and also the height of 400 pixel and that's our canvas here right now so let's start with the context the context is really important in every canvas so we just can say that canvas.getcontext and yeah maybe you know we're going to use a 2d context of two dimensions here and what we can do here is we can say context dot fill um style is equal to and here we can put in every color uh we're gonna use the right color here um hopefully this is right so we can say context dot phil correct and now we can put in from the coordinates of xerox and cori to canvas dot with and canvas dots canvas.hate and now if we save that we fill it wide from top left to down right here and yeah so what we need to do now is we need to um set some variables for our drawing app here so let's say for example that we're going to choose the draw color which is in the beginning equal to black and also let the draw width which is actually the pen width and let's set it to 2 in our case for example and let's define the variable that is drawing is equal to false so we can later specify if we are drawing or not by using this variable so first things first we're going to create two event listener to start our drawing um what we need to do is first things first we're going to say canvas.eventlistener and what we're going to do here is touch start um and we're going to call a new function which we're going to create now which is has the name of false which has the name of start and also we're just going to create the um touch move it went and here we're gonna create uh a function with the name of draw and yeah we're gonna we're gonna copy that and we're gonna create two more so not only for the touch also for the mouse down and we're gonna start and for the mouse move we're just gonna draw alright so of course we need to declare doors to function start and draw and we're going to do that here so we're going to say function start which actually takes has an event for getting the mouse coordinates and first thing first what we're going to do is we're going to say is drawing is equal to true so now we know we're going to draw and here we're just going to say that context dot begin path so we're going to say hey canvas we just begin a new path so prepare to do something and also you can say context dot move 2 and here we need the coordinates from the event which is actually event dot client x minus canvas dot offset left and also event dot client y minus canvas dot offset top event dot prevent default to let default uh default changes disappear so um you will see an error here i think right now because um draw is not defined you will call the draw function um we're going to make it different here from start intro and the the reason is first things first here with the start function we're going to prepare the drawing and the draw function we're going to actually throw and here we have the touch event and here we have the mouse event so this is all also usable in the mobile and tablet versions on the phone and this is usable for the computer um yeah that's what we're gonna create the actual draw function here right now this also takes an event and what we can do here now is we just can check first things first if this drawing um is equal to true but of course uh it's a boolean so we just can say if is drawing and here we just can say that the context dot line two what is this context uh dot line two and here we gonna take the same um arguments like move tool and so we just can say that we're gonna draw a line to the coordinates where the mouse is moving and also we can say that context dot stroke stroke um style is equal to the draw color which we defined here as black in the beginning and we just can say that the context dot uh dot line width is equal to draw with also defined in the beginning here as to and here we just can say something like context dot line cap because it's a draw field we're gonna put it as round so we have a little rounded style in the drawing and also the context dot line join that's very important to get to get a full path a full line with not so many um interruptions inside and in the end we just can say context.stroke to use the define styles here so let's refresh and now as you can see now it will not stop so i can click here the mouse and it will not stop here but it starts trying so what we need to do next is as you can see here it does not stop i can't stop it now but if i click once left we will start drawing with the black color and the width of two so what we need to do next of course is we need to stop the drawing so here we got already our advent listener and what we can do next is something like touch and we can call the function stop and not only for touch and also for the mouse uh out event okay so the stop function of course need to be declared so we can say function uh step um and yeah also like the other functions it takes an event and what we can do here is we can check again if is drawing what we gonna do is context dot stroke again and also context dot close path if you remember in the beginning of the start function we begin the path and here we can gonna close the path and we're gonna set is drawing to false again also what we can do here is something like events dot prevent default and this is what we can use also in the stop function here and yeah let's see if it works we gonna stop it and i click let the mouse clicked and if i go out it stopped so this is a basic draw app we have used here of course we can change the color here for example to red and then we will draw in red but we have here our tools interface where we can change the color also with the color picker we can change the color we can change the size of the pen of course this has no effect here right now so we need to change this and also we can clear the whole cameras and undo the last drawing so um what we're gonna do here is inside the uh index.html we have our fields here what we need to put in here is an on click event and inside this on click event we're going to call a function which is let's say for example change color and as an argument we give in this which means we give in the whole element and the idea is to get the attribute of style to get the actual color of the element so we just can copy that and paste it in the other color fields and now of course we need to to create the function here and it's pretty easy what we can do here is just function um change color and remember the argument was the element itself and what we're going to do here is just that we're going to change the draw color to is equal to element dot style dot background all right so this should already work red and blue and green and yellow oh that's cool we can also do this now for the color picker here and what we need to do here is also in not an unclick but this time on input event because we got an input as html field what we can do here is just saying that the draw color is equal to this value that's it so we just pick here let's say something like this blue and now we got this blue and let's take a purple here and we got the purple all right that's pretty easy to do um let's do it with the uh let's do it with the range input as well so remember we got an input field so this is on input now we can change here is we can say that the draw um underscore width is equal to this dot value and now if we change this here to big size it will be really really big and if you're going to draw it smaller it will be small and the smallest one is one and the biggest one is something like that of also in other colors which can overthrow the existing one there you go here we go let's take this nice so we need to do two more things the clear and the undo function the clear function is pretty simple the undo function is just a little trick to use and save the existing paths so let's begin with the clear function so we got our button here with the clear button and again here we're just gonna call the event off on click and we're gonna call a function which is clear canvas and what we need to do inside the main.js is to create this function so let's do it function clear canvas and here inside you're just going to say that the context.fill style is equal to uh here we just need to get the background color back so um we just can also say a start uh background color is equal to white and then we just can say that the star the full style is the start background color and here we can bring back the start background color also we just considered the context dot clear rect is equal from 0 0 to canvas dot with canvas dot hate and of course we need to fill the rect again with the choosing color here right and actually that's what we need to do so we're gonna raw red and bigger and green and if we click here on clear it's all gone so let's do the last thing here with the undo function and first things first also we're gonna create an on click event but what we're gonna do here is we're gonna name the function undo last so inside here we need to create the function onto last and the basic idea behind is to create an array that saves every draw path you do here you begin a path and this path which will be ended in the stop function with close path will be saved in this area so um we can just create an empty array so let's say let restore array is equal to an empty array and yeah we need an index function to know where we are inside the array so index function will start by minus one so because the first position is zero and if you have draw nothing index will be on minus one not on zero zero means there is al already a path inside um so that's the the basic idea and actually first things first what we need to do is if we stop the drawing we need to add the path inside so what we can do here is we can say restore every the push push it will bring an element on the last position of an existing existing array so we can say that the context and here we use the get image data which actually returns the context like an image path so to say and here as you can see we need the x and y coordinates and the width and the hate and here we just take from zero zero to windows dot with and windows.h to save that and our index of course will edit plus one so um we know that now this will be on position zero because index is now on zero um all right so let's console.log the array the restore array to see what happened here so here we go we need to open the console and here we go um i just gonna draw something and now you can see we got two image data we're just why is it two so what we need to do here is we're just gonna create a if loop uh we're gonna create a if statement and we're just gonna push something to the array if the event dot type is equal not equal to um mouse what is it most out here and only then we're going to push something in you see the area isn't empty and only if we draw it's something inside so two three and it's working here so you got the idea and now we just got an array with all the paths and inside the uh inside the undo function um of course we need to let's begin here with the panels we just need to say that the restore area is again an empty array so we'll be empty again and the index is again on minus one so um what we need to do here is we need to push out the last element so of course we only gonna do that if the index element is smaller equal to zero which is gonna call the function to your canvas because this means there is nothing inside the um inside the uh restore area so we can just clear the whole canvas and if there is something inside we're just going to say that index is minus equal one so we're gonna subtract one from it and we're gonna take out the last element of the array which is in javascript do it done by the function pop this takes out the last element and also returns it but we don't need to do something with that we just need to push it out and we need to say context dot put um image data so we need to restore the image data from the now from the last position after pushing out the last element we're going to restore the data from the new last element which is actually here at the position restore array at the position index and yeah actually as you can see we now we need to put in x and y where to start it and here we're just going to say zero zero so we start at the top left so let's see um what we did here so first things first again our function to clear all and now the undo function is red and let's say blue and then click red and blue and green and yellow and if we undo yellow disappear then queen disappear will disappear and red disappear that's really cool so we got our draw app working and that's the whole tutorial i hope you guys liked the video if you want to see more please subscribe to my youtube channel and i hope to see you guys in the next video and the next canvas video if you want to see more please subscribe to youtube channel and give me like if you liked it see you guys soon bye [Music] [Music] you

Channel: BananaCoding

Views: 20,544

Keywords: BananaCoding, HTML, JS, Javascript, Web Design, Web Development, Node.js, Learn coding, Learn programming, Javascript Website, Coding courses, Angular, canvas javascript, canvas js, canvas html5, canvas javascript html5, js canvas tutorial, canvas game, canavs drawing app, canavs draw app, canvas pen writing, canvas drawing, canvas lines, canvas erase, canavs undo, canvas full tutorial, canvas game app, drawing app javascript, javascript pen writing, canvas colors

Id: wCwKkT1P7vY

Length: 28min 7sec (1687 seconds)

Published: Sun Jan 03 2021