Working on this technical challenge this past week has been quite the rollercoaster ride to be honest. It has made me question my career choice, my expertise and how well I know my skills as I’ve been touting to multiple potential employers. Overall, it’s been very challenging yet I am still determined to get the page working somewhat properly and I have learned a lot about working with Canvas.
First thing I learned is that you should not set the size of the canvas within the CSS file. I figured this out too many hours later when trying to attach event listeners to my shapes within the canvas. I kept finding the same equation to check for a mouse event within a circle, yet they never seemed to work properly. The click event would fire off but usually never in the right spot.
Upon my search to find a solution, I was also starting to notice that developers would define the size of the Canvas when the element is first developed. <canvas id="canvas" width=500 height=500></canvas>
Once I made this necessary adjustment, everything began to work properly. The shapes would appear nicely on the canvas, and when clicked, would perform the correct function. It was my first Hallelujah moment of working on this project. The first hint that I was on the wrong track was the shapes were a big large, but this was only evident after I fixed the sizing of the canvas. Now they looked nice and tiny and ready to be manipulated.
Except I could only manage to create one shape that would display within the canvas. Every time the Add Circle button was clicked, the canvas would be cleared and a different color circle in a new location on the canvas would appear with the previous circle disappearing out of existence. This is when I realized my stupid mistake of creating an array to store the circles was in my constructor method, causing it to empty every time I called a new Circles object. I had to create a parent class of Shapes to store the array of shapes that would then be passed to the Circles class.
In order to change the shape, a form needed to be created when it is clicked that included the current values for color and radius. Passing the values to a separate Forms class was easy, but passing the values back so the shape could be updated wasn’t so easy. Originally I created a static function in my Circles class that would handle the color change, and would be instantiated by Forms when the color input was changed. This was incorrect as the scope within the static function wouldn’t include the shapes array in the Circles class.
Instead, the event listener for a change in the color input would have to be created in the Circles class. Then the selected circle’s color could be updated to the new color.
Now, many pretty circles were popping up on the canvas, and when they were clicked a small Form would pop up outside of the canvas. Unfortunately, multiple forms would be created for each circle made, even though I only clicked on one circle and expected one form. Because I attached the event listener to the canvas element, it seemed to attach it to a shape multiple times. Therefore, even though the mouse selected the correct circle, each circle’s data was sent to the Form.
I had to create an If condition that would check if a form was already created, using the shape’s ID that was also used for the Form’s id. If there wasn't a form, a new form would be created, else if there was a form, the condition would break.
I’ve been working on this for the whole weekend and I feel like I’ve gotten somewhere, but I still have a long way to go. I think I’ve been working on the hardest parts so it’s been taking longer than expected. I have another week to finish it, so hopefully it is smooth sailing from here on out. My next crucial step is getting the shapes to change color once it’s been updated. It seems that while the new color can be inserted into the array, the FillStyle function will not update. Once I have that figured out, that is dragging the shapes and manipulating their size. Wish me luck!
Top comments (0)