HTML5 Canvas | Drawing Text With Circles | Part 01

Key Takeaways

hey guys all were doing welcome to brand in Victoria from I Pyramus and the series of canvas and making a really cool effect using our canvas so the last one or the last two tutorials will spook about how to render things and setting up and getting started things so we have set up the project in here when working on so everything as you can see here we have covered in the last tutorial so if you haven't watched them please make sure to go ahead and watch them before continuing the series and taste one so in this series what we're going to do actually is doing this really nice poof that's from the the temps like showing or filming the whole text with circles you can do that with triangles but the circles are really really more meaningful so when you hover them you're gonna just release them and you cook spacebar they all gonna get back and reform the actual text so it's really really nice effect for the taste tutorial we're just gonna cover making this one we're not gonna cover the collision as you can see when like free in or releasing the balls to go and room on the page we're not we're just gonna cover how to render out the actual text to appear in the circles form here or to fill the whole text with circles so it's gonna be very simple so for first things first so I'm gonna explain what we're actually going to do to achieve that but that's let me use just the same thing so we're gonna have a text let's say a going to be high so we have high in here I don't know how to do that but you're gonna very simple so high and you want to get it what we want to feel or replace the actual stroke with an actual circles so for that we're gonna get the actual position or the each pixel position in here and render instead of a pixel render a circle on the pixel and make like an indentation or a space in between each circle and another so it's very simple so create another pixel actually create a circle instead of a pixels then make or left leave a space then another another Circle another one another one till we finish that so to achieve that actually we're gonna render out a text like with a color with a specific color let's say a text with with live with a white color or the black color the text you want to replace with circles but never render it's actually to the actual user so you're just gonna create an element or virtual canvas you like a background canvas you render up the text on it but it's not gonna appear for you on the upshore window when you refresh or do something because we're not gonna add it to the Dom so the documents actually so then we're gonna loop each pixel and replace each pixel or render out instead of pixel a circles in here so they would appear exactly that this Sirk's has been formed using circle so you can use other custom shapes let's say you can create a custom star shape that would be very phenomenal making a custom shape also integrating into a form to make the shape form actually an actual text that would be very nice you can also use many different combinations and stuff changing colors and all these kind of things and also collision is really really awesome so we're just gonna cover that as you can see it's very simple we're indras circles instead of text and we get the pixels position and all of this kind of stuff so for that we're going to need to get the actual image day and I we have render so this is the glass from the last tutorial you don't need this again or we don't need it anymore in here so first things first what we going to do iike is getting the image data and all this kind of stuff and create the background canvas we're gonna eat you so created back ground canvas so yeah we're gonna use this canvas so we said actually background variable background canvas and we say document dot create elements so I'll create elements in here and we say is gonna be a canvas elements but we're not gonna just add it to document itself that's why we it's not gonna be appearing so now for the background canvas we're gonna set the width and so with equals we know the inner width and background canvass the pint equals window in pints simples that now we need to use that to render out our text so text rendering make sure to comment your kill because it gotta be very difficult for anyone else to read that and what I'm going to when I upload this to github you're gonna make it easier for you to read it and walk through the code and understand it and try to do it you by yourself now clean the text we're gonna get a context so let's create variable background context what samples that are gonna be background canvas doctor gets context I'm gonna use the 2d context as you know so now using the content gonna render onto text so text fonts we are going to use a simple fonts actually so going to be the canvas fine we're gonna use the canvas with impacts or coffee just paste I have already done the code in the background in another monitoring here so yeah it's gonna be very easy for me to you know walk through the code that try to explain like part by part so step by step actually and we do the far sell now for the background context we are going to do fonts style going to change the actual color of the font and we're just gonna set this completely to white so and another FF means a complete white there now go back up contacts Phil Phil text okay we do the string I'm gonna put a new of nice okay and the x-number gonna put about 15 so you can choose whatever but I'm just gonna put fifty and two hundred and seventy-five pixels in the Y position so this gonna render out the text but in the background so we're not gonna actually see it when we were and one thing I forgot about is running the watch for but compiling our assets using the web pack so it don't forget about running the npm run watch it is bagram in there now after rendering the text we're gonna need to get the image data and loop through that for that I'm gonna create a function I'm gonna call it in that and that function gonna have a kind of for the image there and all that kind of stuff so let's create that you need to the image data we need the pixel and we need the width and the height of the actual text we're gonna loop through so for the image theorem we need to get me actually the image the image data from the the canvas so the image data equals canvas or it's called canvas don't get image or kids really gets let me check this out again so it going to be get something I don't know I totally forgot about this second so we are getting the image data boy we say image an arbitrary okay so give the other one and we actually use the context and stuff of the canvas itself okay there's very obvious then we pass it in the width and the height of the optional canvas symbols dance that's how we create the image data so here what we're doing actually is getting the pixels the image pixels or from any portions you can specify that by the width and height bar you can use the or get via whole image of the canvas in the pixels format and actually you get it all of it some in a very simple way so get image data I'm just gonna use that context to get the actual data up your college in the image context so get image data and samples does we're gonna call this 0 0 0 positions like format sounds fine from the top left room yeah and we get the whole within the highlights so canvas or actually we were using here the background canvas you know like because we have rendered out the text into the background canvas so we need to use the can the background canvas instead of the actual canvas itself so with and background canvas dogfights and we're gonna call this the context the background context not the original canvas context because we're not when doing any text in there so after getting that image data let me just move this out of a function in here I'm just gonna loop through every width and height of the pixels so let's say for height equals zero height is going to be less than or equals the actual width because we're gonna loop through each of the canvas or each of the pics also gonna call it's like the heights and plus the dances so the dancers are gonna create another variable and this is gonna be like the gaps between the circles so let me go back to the examples you'll see there's gaps between each circle here for me the text so for this we can specify variable that will allow us to do this gaps you can make the the the circles like a pure stretch but this is not a good idea it won't looks perfectly nice in there so Dan says you can go to whatever I'm gonna give this about I don't know about 10 or something try to do this so gaps okay now for the height and the height is again gonna be less than canvas dot height and we're gonna have height plus equals so each time we add a dancers so this is what's gonna be useful now we look through the height then now we look through the width so with equal 0 gonna be with less than less than not equals okay the background camp is because we understand we are socially starting from the 0th index and width and we're going to say with plus equals dances simple stairs gonna go through the width now we we get the pixel there so now we get the actual pixels they're like the pixel color and this we're gonna use because we're gonna tell it since we're rendering here and a white pixel like a wash text so we're gonna get each pixel in the text and we check if the pixel equals to white like it tells a white color that means we are in the tank so we are good to draw the circle into the sacks so you've got the points very simple so we check out or actually let's assign the pixel equals we aren't using this like image image data in you and we do something we get the image there actually and there is a data variable and we use some kind of formula in here to get the actual data so we say image data data you get with as high sports background campus not with and times four minus one so just put this in their urine really nice need to worry about this you can you can do it you can do your own possibilities in here lucky you can change the for you can turn the numbers in here but leave is us as it is if you want to get the actual the actual results as I do in my my browser window so here we're gonna call the pencil and we're gonna check whether or not pixel is in a white color or Houston pixel has or icon so if the pixel is 255 255 moon means a white color so if you are familiar with RGB a color schema and here we're actually going to call another function gonna draw us the circle so we're gonna call another function and that function is going to be actually function call it's something like draw circle okay so we're gonna draw each circle of the position and you're gonna take two parameters it's gonna take the X and the y so where are we actually going to draw the circle so this is very simple and this X&Y gonna be the pixel the pixel got fixed in here so we're gonna pass in the height and the width and those are storing our pixel data so the pixel positions of the actual Texas there are 255 which mean we are over the text so we're ready to draw the circle under the text to form text using circles ryoga's so for that we're gonna do a normal way of drawing things like the context and stuff so now we're going to use the actual context our our objects or the actual context of the the canvas so contour is gonna call this begin path okay begin path and do a contacts dot here we're gonna do the contact style so context since you are gonna to draw a fill so I'm gonna use the fill style and I'm going to just put for now a yellow so just for now for testing purposes and contacts though gonna be [Music] filled simple stars or before that is actually joining the actual circle so we use the arc so our put it the X number are gonna be the same X and then Y the radius and let me just define a global variable for each pin for each circle to have the same pick just same radius of circle radius going to be about sex okay I'm gonna be very small so you have so called radius then we have a start angle gonna be 0 who have already talked about about best so now the pi times two folks now it should draw us a filled circle on each position on each call this now under here draw a circle with a width and remember the width is the x position and the height is the wine possession so very obvious especially because we loop through each line then we look on each column this or L the height is gonna represent the world and the way I'm gonna represent the columns you are familiar with grids and looping through guests and stuff like this so gonna be pretty simple as upset I'm just gonna pass it in here and should draw us a circle and now what we can do actually is test things so we should see something so all we need to do now is draw things and see what we have got so far so control P opening default browser this should open up from the default browser and we've got nothing so let's see what's going on the console get image there is not a function under the background context so I'm using get image data s okay this is not really what we want okay get image data try again nothing to render arms at all so we've got something in here so now after editing our code and fixing the problem the renderer is working fine but we have edited the code a bit to make it looks a bit more efficient and like it can we optimize it for rendering and I cannot help us a lot on our next tutorial at the fourth episode to render a lot of thing a lot of a lot of circles and updating them and animating them so in this so it's easy in this tutorial we're just gonna render them they're still they're not gonna move so we're not using the update function but here we have to blur the circles variable or actually in the Ray so this gonna hold up all the circles on there and the circles in the push a new circle which gonna have the x position in the Y position as a as I showed you or gonna talk about this in the next tutorial so keep that in mind and another function is the render circles now instead of rendering them in here we are actually ready so let me just comment this one because I'm gonna use this one in in the next video tutorial this just for velocity and start excess tour why it doesn't really matter for now so we have a little function this is gonna handle the rendering process which means out in the arc and the begin path and closed path and feelings song and all this kind of stuff is gonna help innovation just circle on in here we call the draw circle as we have done in in each pixel so we drove things or we push each circle on the array then on the render one we're gonna loop on each one like the shortstop length then we don't do them to the screen as simple as that when we call them into circles with the circles array here because we are specifying which array we can use the array because to cooperate but I've made this for you if you want to change the code bit to suit your needs you can do that very easily for entering and remember the arc for the global excellent global Y and radius and all this kind of stuff and the problem but we haven't done here there something is because we haven't like other the background began path so make sure to other that context began that before when doing the fonts like the background funds that we using for knowing the pixels then drawing up on this pixels a circle so as simple as this we've done that and initialize it make sure to call the initialize things create an array and push it circles in here with using just the global X and then render this out and call the render function on the end after doing all this kind of stuff so now control stage make sure to like compilers or boundlessness you're using webpack in here then and make sure to call circles up here because if you call them them but down there it's not gonna be gonna be in define for them so just make sure to call them before the init function and everything gonna be alright so all right now everything she looks fine control save refresh you should see a nice text on the screen rendered for us using circles so simple as this we've got this text on the screen it just really fast just getting the pixels drawing up on the pixels in yeah boom we've got the text in your but it's not doing anything in just ten you're still in there there's no animation there's no update function it's not moving nothing at all what we're going to do in the next one is updating them and check it the collision with the mouse like when we when we do a whole words with the mouse we're gonna check the collision also the collision with the window like the border of the window we're not gonna like limits or limit the balls to the actual window borders the width and height and simple steps we've got the render text so in the in the second part or you can call the next episode I'm gonna talk about the collision and how to check it's in the function responsible for checking the collision between two circles then them we draw them in a circle I've surrounded the mouse and almost kind of stuff to update and enemies our circles in him so thanks for watching I hope you really enjoy this one you don't your problems issues anything just post them in the comment below be very happy to you know responds to you and do whatever you need to do so make sure to click the comments in the any tutorials just for me I'll be very happy to record or do the best I can make sure to become a patreon if you like subscribe to the channel share video