This is a 2D graphics demo built with HTML 5 Canvas. The demo showcases a basic drawing program that allows the user to draw on a small canvas and select different colors. The user is given a default set of colors to choose from and also a custom RGB color as well. The user can at any time reset the drawing board by pressing the reset button on the right. Pressing the reset button will clear the canvas to a blank white background.
The demo can be accessed here.
The greatest challenge for this assignment was trying to find the best way to allow the user to fluidly and responsively draw on the canvas. At first, I figured that setting an interval for 10ms which called a function to draw a filled circle at the mouses current position would work, but 10ms was far too slow to draw a continuous line with the circles. I looked at setting the interval to go faster, but the fastest possible speed of the function is 4ms which still wasn't fast enough. Next, I tried relying on the mousemove event listener to update and draw a new circle for every pixel that the mouse moved. Apparently, the event listener is also too slow because that didn't work either. Looking at the canvas, there were lots of circles fairly close together when attempting to draw a line, but the only problem was that there was clearly whitespace between them so that the line wasn't continuous. That's when I came up with my solution. I came up with a system where two pairs of coordinates were stored: the old pair and the new pair. On every mouse movement, I would overwrite the old pair with the current new pair, record the current mouse position and write it to new pair, and then draw a line between old pair and the new pair on the canvas. With this system, lines could be drawn completely continuously. Even if the mouse is moved extremely fast, the points will just be spread apart farther and the line will still be drawn between both of them.
I had originally planned on letting the user select brush size (this would be line width in terms of html canvas). I didn't have enough time to implement this, though it would be extremely easy to do. The hardest part about setting this up would be determining how best to allow the user to select the brush size. I've had different ideas (circles of different sizes, number input, etc.) but I think the best would be to have a number input that forces integers between certain values. I would also like to potentially add different brush shapes. I know how I would implement a square shape, but I have no idea how I would implement other polygonal shapes. That would be a great challenge to tackle next.