Let's build something fun with HTML5 Canvas - #JavaScript30 8/30

[PalashMondal]

I had so much fun learning about this. Learned about mouse and touch events, HTML5 canvas, boolean flags and HSL.

[ThePolaris]

At 9:30, I solved the one-continuous-line problem by simply writing on line 27:
lastX = e.offsetX; and lastY = e.offsetY;
( This is after ctx.beginPath(); and before ctx.moveTo(lastX, lastY); )
This seemed just as effective and much simpler than modifying the EventListener functions.

[erikhendin]

This is awesome and super fun, thanks for making learning javascript so much fun!

[shoaibkhan]

Had so much fun learning from such a great man .thanks sir for every thing .love you ❣️❣️❣️

[mattdudzik]

What about touch events for mobile? I tried adding an event listener with "touchstart" in place of "mousedown", changing "isDrawing" to "true", also added an event listener to "touchend" to change "isDrawing" to "false" to no avail

[armandjansevanrensburg]

Love your vids especially the react ones, sitting in south africa and coding. LOVIT!

[christinefredricksen]

Thank you for the tutorials, that was fun and I learned quite a bit.

[gshnoozer]

Awesome!

I decided to throw in an extra and when CTRL+Z is pressed, it clears the canvas, resizes the brush size and the color. :)

[MotiviqueStudio]

I haven't used Canvas yet. Is it possible to overlay a canvas element on an image (or simply import an image to the canvas) to create various games? Word search, coloring book, etc.?

[saadshah]

i am doing same code but doesn't work what's the problem?

[Ludo]

i've been wondering...
Why is

ctx.beginPath()
ctx.moveTo(e.ClientX, e.ClientY)
ctx.lineTo(e.offsetX, e.offsetY)
ctx.stroke();

not working.
I thought that with e.ClientX and Y, it would work and we wouldnt be forced to uptade our position, but it doesnt work.. instead of clear line, we have behavior we want but with dots instead of clear line.
For that matter, using *ctx.moveTo(e.PageX, e.PageY)* should have give us the result, yet it doesnt.

[michaelnugent]

This is really cool and fun!! Thank you!

[AndersonSousa]

Hey Wes, could you explain the diference between all these properties of X and Y position and when to use it? (offsetX, pageX, layerX)

[janhorak]

Why not just use e.clientX and e.clientY
why are we using lastY lastX and offsets?

[sweetteamcformerlymrterras]

Hi, awesome video. I learn a lot from you. hehehehehehe

[wajidkhankhan]

i want a range button and color picker...

[arch]

"Eventually everything just gonna be black" ... Well i came for some JS, aaaand JS i got..

[feelingeverfine]

This was one fix that was bugging me on mouseenter events.

canvas.addEventListener('mouseenter', (e) => {
if (e.which === 1) isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
});

[Jorissoris]

FIRST! I don't like empty spaces :(

[sessonid]

This one got me hot and bothered not gonna lie