I want to get more comfortable with canvas to perhaps animate some art, or make an interactive site where users can make pictures, or just for kicks. The only way to get going is to try out different things, so today's creation is another jsfiddle which is a drawing website.
Coordinating all of the event handlers so that the drawing started on a mousedown and ended on a mouseup event was the first challenge. The next challenge was a simple offset for the coordinates. I am sure there is a simple way to make the selected coordinates align with the canvas element, but I decided to merely offset based on where it was located in my browser. This will be a problem on mobile devices and whatnot, but it works for now.
The last element of the puzzle was setting radio buttons to choose size and color. I quickly learned that jQuery is perfect for handling these inputs and can set the variable with var circSize = $('input:radio[name=circSize]:checked').val();. The only trouble was determining where to place this call, but I ultimately decided to place it at the start of the mousedown call. The user can change the color or size at will, but my program should not care until they attempt to draw something.
The whole code that I wrote can be found here.