HTML5 Canvas Drawing App (Part 2/6)

Official site

Twitter

[funkymaniak]

Your context will always have a default path to use, all beginPath does is make sure that the path is clear. When you use lineTo without opening a subpath beforehand (e.g. with moveTo) then all lineTo will do is open you a subpath and add the given point. No errors :)

Hope this makes sense.

[bautrey]

This is a great example how to use mouse events in html 5. I'm sure to be using these on a project soon.

[DomFont]

There is a problem when the mouse is going out of the windows with the button pressed. the path isn't cleared. So, a line is created when the mouse is back.
We just have to add this line to resolve it:
drawingtable.addEventListener ('mouseout', disengage);

[mayaahmed]

Thanks. Awesome work. So clear. I understood every word.

[welovephp]

Switch to 720p.

About the tutorial which is great, is there any way to save the final result after you drew something and maybe share it ?

[McGavel]

Thanks! I had a little fun with:

*radius = prompt("Set Cursor Size");*

[shaponislam]

This is awesome. Every information is clear for me. Thank's a lot to you..

[TukiiTuki]

this tutorials are awesome, somuchthanks!

[Fprod]

Hello how to adapt this code for touch screen with events: touchstart, touchend touchmove ? ( i'm french sorry for my english) can explain to me please it's urgent. thank you in advance

[_Mackan]

Hey, phpacademy! You should make a follow-up tutorial with how to save the canvas, how to change radius from a select list, change color, and clering the canvas with a button

[soufianekharroubi]

Thx, it's exactly what i needed! Very nicely explained. A bit slow for me but it's better for everyone :) Well done mate!
A link to the full code would be very nice too.

[mrcfmoftheworld]

well done & explained
Is it possible to save the dots or lines we draw?

Many thanks in advance.

[js]

This is awesome. Well done creating a simple yet informative tutorial. I am working on a drawing website as I learn to code, but this is the first drawing tutorial I've been able to get to work.

Since you publish so many tutorials, maybe you can tell me: When and what attribution is expected when following a tutorial to generate content?

[FinleySiebert]

If you give the body an overflow:hidden; your scrollbar will also be removed.

[Sancyo]

AHAHAHAHAAHAHAHH "ENGAGAAAH" AHAHAHAHA YOU'RE SO MUCH FUN AND YOU EXPLAIN REALLY WELL I LOVE YOU AHAHAHHA

[bFix]

Dosen' the First line to cause an error because you haven't opened the path and no start point!?

[_Mackan]

Well, make a tutorial for savin the image!

[RokaiaJedir]

Thanks so much! Really easy to understand :-)

[dveeid]

What if the canvas isn't the size of the page? How do you make that work?

[haikuotiankongshengj]

can just context.lineCap="round"; instead of context.arc(e.clientX, ....)