I’ve developed a love for the canvas element. It kinda lets you do fun things. One of these fun things is that it gives you the ability to do a drawing app. And that’s what I want to do today!
Started off simple by just setting up the canvas.
Then there was the user interaction part. First off, I wanted to grab the x and y location on click
Now that I have the location, I also want to grab the movement [you can see in the console how much log statements are grabbed because it’s recording the mouse x and y on move]
Now I want to actually draw something. I’ll first set up color options and proper buttons. And well… as you can see my alignment is kinda iffy
on the road to fixing the alignment.
And then finally fixing it.
To witch, later on, I added the drawing functions [first wanted to see the black working]
Now that the logic is right, it’s time to make color selection working
And then I wanted to customize the look and add more functions
Now I still have a couple of things to add like the right menu options [brush size, and more color options] as well as making it mobile friendly. However, with work taking most of my time [exams week are hell] I’ll continue these functions tomorrow. You can check the beta version here. [You will find some bugs since I haven’t cleaned up my CSS, nor added the functions I mentioned but they will be fixed tomorrow] This was fun! See you tomorrow for part 2. Till then, Happy coding 🙂