HOW TO DRAW ON THE HTML5 CANVAS WITH CSS AND JAVASCRIPT

Описание

Hello, in this video I create an html canvas where you can draw with the mouse, this is done through the mousedown, mousemove and mouseup events, a state variable isDrawing that defines whether it is being drawn or not and the X and Y positions that are the initial positions of the mouse cursor.
Then in the html canvas I apply properties of the canvas such as the beginPath and closePath that start and close the current point to the starting point, in addition to properties such as lineJoin and lineWidth which is for the width of the drawn line, moveTo and lineTo which are the properties where the start and end coordinates are, and finally stroke () draws the line.
And at the end add the icons for the mouse both to erase and to choose color.

inspired from the tutorial on :
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage

These are the resources:
?Icons : https://www.flaticon.es/
? Font : https://fonts.google.com/specimen/Ubuntu

Code on github:
https://mitly.us/xDRTmD

My playlists:
Login Form examples: https://n9.cl/bfxyy
How to draw with css: https://n9.cl/dohn8

Follow me on my social networks:
Facebook Page: https://www.facebook.com/gcodedev/
Twitter: https://twitter.com/gcodedev
Instagram: https://www.instagram.com/gcodedev/

You support me by registering with my referral link:
Mitly: https://mitly.us/ref/xxdyangelxx
Freebitco.in: https://freebitco.in/?r=41297544
Presearch: https://presearch.org/signup?rid=2217169

If you liked the video, do not forget to subscribe to the channel, leave a comment about what you want to see in a next video and leave your very powerful like. ?

Until next time.

#css #webdevelopment #htmlcanvas