Day 8 is all about mouse events and drawing on the canvas and it was fun! I’ve used the canvas before when teaching kids Javascript. We used it to make giant pixels for our own version of Conway’s Game of Life and Langton’s Ant. But in there we were pretty much just drawing rectangles at a particular coordinate. There were no mouse interactions, or any of that.

In this exercise you build a super primitive drawing tool that lets you draw with ever-changing colors and brush sizes on a canvas. Stuff I learned about here was different effects you can have when drawing by setting the globalCompositeOperation on your drawing context. I didn’t know about that, but with enough patience and time you could probably get a lot of the layer effects you find in Photoshop to work when drawing on the HTML 5 canvas. Constantly changing the size and color of the line also make it a lot more visually interesting to play with than just a constant size or color, even if it would be near impossible to use to get some result that you were trying for. Setting the canvas to draw behind with destination-over is pretty cool. It would be fun to experiment with adding in controls for the size of the line (keyboard maybe?) and letting the colors cycle or dynamically (with control perhaps) changing the globalCompositeOperation value while drawing. I think you could come up with some pretty cool looking drawings.

Other ideas for enhancing this would be to split the canvas into different zones with symmetry so you could make some pretty elaborate drawings while only needing to control one part of the path. All-in-all, I enjoyed this one quite a lot.

Looking forward to day 9.