We used more HTML5 and JavaScript in this exercise. We had an HTML5
<canvas></canvas>
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
$canvas.mousedown(function(e) {
lastEvent = e;
mouseDown = true;
}).mousemove(function(e) {
}).mouseup(function() {
}).mouseleave(function() {
});
$canvas.mousedown(function(e) {
lastEvent = e;
mouseDown = true;
}).mousemove(function(e) {
}).mouseup(function() {
}).mouseleave(function() {
});
Obviously this code doesn’t work in its current state, but I digress. So drawing the line in the app consists of
.mousedown() .mousemove() .mouseup() .mouseleave()
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
.siblings()
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:
$canvas.mousedown(function(e) {
lastEvent = e;
mouseDown = true;
}).mousemove(function(e) {
if(mouseDown) {
context.beginPath();
context.moveTo(lastEvent.offsetX, lastEvent.offsetY);
context.lineTo(e.offsetX, e.offsetY);
context.strokeStyle = color;
context.stroke();
lastEvent = e;
}
}).mouseup(function() {
mouseDown = false;
}).mouseleave(function() {
$canvas.mouseup
$canvas.mousedown(function(e) {
lastEvent = e;
mouseDown = true;
}).mousemove(function(e) {
if(mouseDown) {
context.beginPath();
context.moveTo(lastEvent.offsetX, lastEvent.offsetY);
context.lineTo(e.offsetX, e.offsetY);
context.strokeStyle = color;
context.stroke();
lastEvent = e;
}
}).mouseup(function() {
mouseDown = false;
}).mouseleave(function() {
$canvas.mouseup
});
context.beginPath()
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/'>bdPrvw</a> by Tiffany White (<a href='http://codepen.io/twhite96'>@twhite96</a>) on <a href='http://codepen.io'>CodePen</a>.[/codepen_embed]
