Day 7: Drawing App | Tiffany R. White Blog

Day 7: Drawing App

Reading time: 1 min

Day_7

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]

Share

No Ads. No Sponsored Content. Ever.

I've decided that I no longer want to have sponsored posts on this blog. I also, though as tempting as it may sound, don't want ads; even if I got big enough for Carbon ads I don't want them. I want to post free, engaging content for beginning/junior devs. This means that I won't have Setapp posts or affiliates on this blog, though I will keep them on the Uses page. If you enjoy the content, buy me a coffee. Just click the button below.




Webmentions 0

No webmentions were found.

Newsletter