Building a drawing app using Canvas & ReactJS | Manoj Singh Negi | Recraft Relic

hey guys uh welcome to recraft library channel so i am a bit late today but yeah uh so let's get started so today we are basically going to build our drawing app in canvas basically so what basically will happen is we are going to use canvas and react and we will allow the ability to use mouse to draw you know lines and stuff in into the canvas and then we will be able to download it so let's get started uh so i already have a demi application as you can see here so i'm just going to stack it here and i have the browser open here so one sec let's get started okay so now i have this on now uh let me start the project yarn start okay so the project is running so let it get started so you can see the dummy here right so now let's start by creating a canvas okay so we'll create a canvas tag here canvas not like this can worse uh you know and will provides its with will provide its width as 400 height as 400 as well right and we'll provide it a bit of style so let's do that style um and border to be one pixel solid as zero zero right uh let's see if that works now you can see the canvas here now uh let's uh right so now let's define a ref ref so we will be able to access the uh you know the context of the canvas so we'll be able to draw into it so now let's uh let's go canvas ref and we'll define the graph here const canvas graph equal to use graph and null right and uh now let's uh you know try uh to capture the mouse events right but before that let's create some few buttons here so let's create our button to clear the canvas so if we click on this the canvas will click get cleared then we are going to create a button for download so it will basically help us download i'm just going to put them in the next line like this right and then there will be a select button so the uh not a button but i input the reason we need this select is uh because we want the user to choose which color they want uh to draw in basically if they want red green yellow whatever they want right so we'll define some options here um let's create that list uh here const colors equal to an array in that array red green yellow or black we can also have blue right and now we are just going to map over them here colors dot map color option now its value should be this color and then the label should also be just a color right so now you can see red green yellow blue right now we need a state to keep track of this so i'm just going to define that above so value will be a selected color and on change we are just going to do uh you know we are just going to just say set selected selected color to e dot target dot value now just let's just do that let's refactor it a bit yeah and uh now i can go ahead and define the state cons selected color and set set selected color equal to use state by default i want it to be red or just color 0th element and let's see if that works e is not defined yes it is not state is not defined okay let's auto import it yeah so now set color is not defined selected color selected color it is defined right yeah okay so uh now let's uh just check if this is working for example if i put one it should be green right by default yeah if i put like uh three here it should be black yeah you can see right so this is working uh let's keep it zero now uh we have all of these things are in place now let's uh you know just uh start uh drawing uh putting them logic behind the drawing okay so let's uh start doing that so uh for that what we need is uh is mouse events like if i'm moving the mouse across the canvas i should be able to you know draw so let's start by on mouse move right so i'm going to need all of the mouse events so there are like four on mouse move on mouse up on mouse down and on mouse leave okay why i need them i'm going to explain in a bit so on mostly on not just but on mouse sleeve okay right now let's start by writing a draw function you know which will basically draw the uh you know the lines and uh which will be responsible drawing the lines when we move the mouse okay so we do that by uh defining a draw function and this function will take uh you know x and y the reason it takes an x y because we know where you know we are drawing two you know from the point where we started to uh to the point where we are drawing draw x and y if the so we are only going to draw when the mouse when you when uh the user had mouse pressed so if they don't have mouse pressed in a mouse uh they are not uh you know pressing the you know the left uh the left uh click then uh it uh the drawing will not work all right so because if we are just moving the mouse we don't want to draw we only want to draw when we click and then drag basically so we are going to say if mouse down only then draw okay uh it will draw only when the mouse is down right so the other thing that we need is it's in a drawing context the canvas drawing context so which is like the rendering context so for that what i'm going to do is i'm going to define another ref ctx equal to use ref which is null so by default they will be null but on use effect when the component first mounts i am going to set this context instance so if canvas ref.current so if when we mounted the canvas is live i mean canvas is mounted then we will take its um you know its reference so uh it will be ct x dot current equal to canvas ref dot current dot get get context 2d so we are getting the 2d context so we can draw in the canvas okay uh why i'm using ref is because we can't set them you know all like we can't use the set them inside state because you know we're going to need them a lot and we don't want the instance to change again and again and they don't change uh much often so i'm just using ref for them it's much more easier to access uh access this kind of things uh which like our instances you know um it's it's much more easier to access them using ref so with because the ref doesn't uh you know every re-render the ref doesn't you know resets so it always carry the first incense which we need in this case so now we have the con you know rendering context what we can do is we can simply start drawing our application so firstly we'll start by calling begin path so begin path basically uh tell the canvas that we are trying to uh you know draw a line or not a line but draw a shape so it starts the path then we set the current uh you know our stroke style so stroke style is the basically line based the color of the line that we are going to draw so this is stock stroke stroke style so we are going to use the color the selected color in this case right now we have to define its line width so ctx dot current dot line width equal so for now i'm just going to 10 but we can also make this dynamic if we want then we need to define how two lines will join or what the shape will be created when two lines are joining so if we are like like making a move you know or connecting two lines or two parts we want it to be round you know we want the edges to be round we don't want them to be like sharp or something so there are three values that you can pass but i'm using round for now you can pass meter as well so meter basically going to make your uh joints you know sharps sharp if you want them so but for this tutorial i'm just going to use round and then what i'm going to do is i'm going to tell the um so whenever i'm drawing i'm going to tell the context to start from the point where i started so where i left so last position dot x and lastposition.y so we are going to ah we are going uh to save these value last position uh you know in in like uh in our state but we are going to uh you know reach there in a bit then i'm going to say ctx.current.line2 so from this last point and last like last position xy to the new xy which was provided to me when you know draw function is called so basically what we are doing we have a last position x y and then now we are moving to uh now we are drawing a line between uh the new xy and the you know last position x y so after that is done i'm just going to say ctx dot current path dot close path so now the you know path is created now we can close it so we just call the close path and then we say ctx dot current dot stroke if you don't stroke then your line will not be visible because stroke function outlines your path you know whatever the path that you created the line you created if you don't stroke then it will not be visible it will be in the like an invisible line but until and unless you stroke it uh it will not work and when you stroke it the whatever stroke style you have provided will be applied so if it's red then line will be rendered in red if it's green then it will be rendered in green okay and then we say let's now these new positions are our old position set position x you know and why okay so not like this like object the reason we are doing because once we uh once we draw and uh you know now the new xy which was provided to draw is our last point because now uh if we are going to draw again we need these xy you know because we want to move between those uh we're going to draw between these points right so now certainly let's define these um you know like this variable um so i'm going to go here const last position set position equal to use state x is zero and y is zero so always uh you know keep these as a starting point x and zero and y is zero right and we also need a state to know if our mouse is down or not so mouse because if mouse is up like if the you know if it is not clicked and we are not dragging then you know don't draw so we don't want to drop so we're just going to do is like this so you said by default it always will be false in the starting now let's d define these functions you know on mouse move on mouse up and all that so let's uh the other thing that i have to do is uh is this so i'm going to change it into use callback because i'm using state variable inside it so i need this function to redefine when the state changes if you don't know how use callback callback work then i can basically link my another video in the description where you can actually go check out what how use callback work so last position and we also need the mouse down so i'm just going to define the mouse down as well here right and the selected color is also needed right so let's do that as well so um okay so now we have the draw function now let's start drawing okay so firstly and foremost we are going to define on mouse down what will happen when we do on-mouse dom okay i'm going to move this up all right so what will happen on on mouse down so define let's define on mouse down equal to right so basically when we have the on mouse down what we are going to do is we are going to take its set position we are going to take its x and y so x e dot page page x and y e dot page y right and uh going to just set the position right because you know because uh these are the new points or you know where the click started so from here we are going to draw uh draw the line so we set that and then we said that mouse is down set mouse down to true now again i'm going to uh you know convert it into a use callback okay or do i need to i don't think i need to do this because they are already going to define once so i think it's fine so now we have defined the on mouse down and now let's see if that work let me just comment this thing out one second right now let's console some things so on mouse down that's after almost one let's console the mouse down property and the position property not the position last position last position let's see so by default it's false position is not different obviously it does not matter right now if i go and you know you can see when i click the mouse down becomes true and the x and y uh you know retrieve the value from the page basically if i go here at the top this will decrease if i will go here it will increase the other the problem with this is that once i click the mouse in mouse down is always true even if uh mama my mouse is up or i'm uh you know i left the canvas so in that case what we are going to do on mouse up and on mouse leave we are going to set the mouse down to false so on mouse up on mouse up set mouse down to false same with the on mouse sleeve right so let's do one thing because they both are doing us doing the same thing i'm not going to you know define two function i'm just going to use on mouse up so on mouse up equal to on mouse up on mouse leave equal to on mouse up okay now let's see if that works i get uh yellow so if i keep kept the click you know i right now pressing my uh you know mouse button then it will always but as as i release the button you know it will become false you can see right and if i leave the canvas then again it falls become false like look at that right so this is what we needed because we don't want once once it's true then we start drawing right and we don't want even if it's not clicked we don't want to draw it so that is that and now you know the juicy part basically which is drawing so till now we haven't drawn anything so let's start our drawing thing so now let's define on mouse move and on mouse move what we are going to do is we are going to draw e dot page x and e dot page y and we are going to put this function here now let's see if that works okay i have to define it yeah you can see right so we are able to draw now but one thing one problem here is that this thing is not changing even if i click on blue this thing is not changing so we have to figure out why that is not happening okay so let's go here this is the stroke style right uh i stroke okay yeah the spelling is uh wrong so it will be this right let's reload this yeah you can see red if i go green then it will be green if it's yellow then it's yellow if it's black then it's black if it's blue then it's blue and you can give give any you know imaginable color to this now we have two things there once is once uh is clear and the second is download so we also want to clear it and download it so let's look at how we're going to clear it so let's define const clear function now uh how clear works is that we are just basically going to draw on top of it you know we'll draw a rectangle of white color on top of it so how we're going to do something like this so ctx our context dot current dot uh you know a clear rect zero zero and from where to where you know so from zero to zero c t x dot current dot canvas dot width so whatever is the width of our canvas two whatever the uh you know width of uh like the height of our canvas okay so we're just going to do that we're going to clear i'm also defining the key because it's keep giving me warning so i'm just going to define it here and uh where's the button so on click now i i go ahead here uh did red yellow blue right and now if i click clear then it's clear the canvas right so that is good so now the next functionality is download let's uh you know have a look at it how we're going to define that as well now i'm just going to do const download equal to right so firstly and foremost what we are going to do is we are going to take so whatever is written here so whatever is written here we're going to take it convert it into a blob and then download that blob so if you don't know about blob and everything i will basically link every information down in the description you guys can go and have a look there so now um how download works like this so first and foremost we are going to extract the blob from the canvas to do that i'm going to make this a function so to do that we are going to make a fetch request something like this fetch you know image so this image uh i'm going to define what this image is going to be but uh dot blog so we are basically what we are going to do is not image here it will be a blob so what we are doing here is we get the data url image from the canvas and then we convert it to a blob using fetch to get the data image uri from canvas ref current dot to data url and which format so i want it into a in a png so i'm just going to do that like this right um now we have so if you don't know about uh data url they are like uh a normal url normal source but they have all the information um a data url have all the information in the url like how the image will be rendered and everything um if you don't know about data url i'm going to link about it in the description you guys can go and have a look so now we have the blob and now what we can do is we can convert into a blob url which we can download so blob url is equal to url dot you create object url and we're just going to put blob inside here and now this blob url can be downloaded to download it we're going to create a link document.create element which will be a a element then a uh dot a dot rf equal to blob url and we say a dot download so what will be the file name when it will download we will get downloaded so image.png for now and uh then a dot so uh right arrow download and everything and now we're just going to say a dot click so we don't want to add this element in the dom because we don't want it to be seen so we're just going to do this uh this will not be a just a so it will be a link link.click all right uh now let's just go ahead and call this on on click of this function and now let's see if things works right so i'm just going to type my name draw my name now type i click on download let's get downloaded let's open it here and you can see right so i can again go clear it and you know i can go here build a peace sign right or i can go here build a react sign you know something like that yeah so yeah i mean uh yeah as you can see right um this basically opens up here and yeah i mean this is pretty much it right guys uh it's pretty simple uh you know uh i'm going to put all of this code in the github so you guys can go have and have a look but yeah i mean this is it um we have we basically in this video what we did is we learned how to build a canvas drawing application and their uh implementations are like you know and uh you can build anything with this you can even draw a image on on top of that you know draw you can you know render image and on the top of that draw or something we can also change colors if we want to we can also change the width of this uh these lines we can clear the canvas or after we are done we can also download the image you know which you can see here so i hope you liked the video you know and if you did please subscribe like and share this video and yeah i'm going to see you on the next saturday

Channel: Recraft Relic

Views: 744

Keywords:

Id: _N9xf1r1yD4

Length: 29min 5sec (1745 seconds)

Published: Sat Jun 19 2021