JavaScript 30 — Day 8 — Fun with HTML5 Canvas

I have limited exposure to HTML5’s <canvas> tag but did use it in a side project before when dipping my toe into using Chart.js but that is something for another day.

This day’s exercise was a code-along for a simple Paint style clone in your browser.

A lot of this exercise, for me, was based on learning the syntax of dealing with canvases and their context so it was a lot of just following along.

You can jump into this challenge or just YouTube a tutorial on how to use Canvas and the context methods you can use. If you don’t need the visuals or the examples, check out the MDN docs for it.

This exercise was a fun intro into Canvas and after this I would feel pretty comfortable making a more flushed out Paint all in browser.

Something to note:

• My wired mouse has a much higher DPI than my laptop trackpad or my wireless mouse I had to alter the math a little as compared to most users’ devices since the mousemove event was triggering much more often.
• I’m sure there is a more sophisticated way of handling that but it wasn’t really necessary for the time being.