Day 7: Drawing App

We used more HTML5 and JavaScript in this exercise. We had an HTML5

element which we have to use JavaScript interactivity to; we can’t use pure jQuery to make this app work so if JavaScript is disabled, the app won’t work.

We used new event handlers like

Obviously this code doesn’t work in its current state, but I digress. So drawing the line in the app consists of

so when you click initally, mousedown, move the mouse, mousemove, release the button on the mouse, mouseup, and when the mouse leaves the DOM element it was bound to, mouseleave, which won’t make an awkward line when the mouse comes back into the DOM element.

Learned new methods like

which will access the siblings in a child element and execute an event handler or another method.

We learned JavaScript specific ways to make the canvas interactive. The code looks like this:

and such are the ways in which you can implement drawing interactivity to your app. The full thing is on CodePen or just work with it here:

[codepen_embed height="800" theme_id="0" slug_hash="bdPrvw" default_tab="result" user="twhite96"]See the Pen <a href='http://codepen.io/twhite96/pen/bdPrvw/'&gt;bdPrvw&lt;/a (opens in a new tab)> by Tiffany White (<a href='http://codepen.io/twhite96'&gt;@twhite96&lt;/a (opens in a new tab)>) on <a href='http://codepen.io'&gt;CodePen&lt;/a&gt;.[/codepen_embed (opens in a new tab)]