JavaScript Tutorial 7 Paint App Canvas API

In this tutorial I start creating a JavaScript Paint Application while exploring all that is possible with the JavaScript Canvas API. We'll create a paint app that allows for Opening, Saving and the use of Brushes, Lines, Rectangles, Circles, Ellipses and Polygons. Each tool will work with the rubber band effect like other advanced paint apps.

I will add on to this series if you guys want me to. If this series averages 10,000 views I will continue adding functionality.

RELATED TUTORIALS

Like the channel? Consider becoming a Patreon! Check it out here:

THANK YOU TO MY PATREON SUPPORTERS LIKE :

[exodus]

Thank you very much for covering canvases again Derek :) You're awesome :)

[karlee]

You are so awesome Sir.
As always, appreciate all your work.
Come on guys, let's get the views up up up and

[EddyVinck]

Watch @2x. JavaScript starts at 9:25

Thanks for the video Derek

[masoud]

The way you explain complex concepts is so easy and understandable for everyone. Thanks Derek

[binihalex]

I never knew you could do that ... thought it is some high tech coding stuff. Thank you sir

[akagaming]

You're totally a Jack of all trades Derek, thanks for dropping this content!

[Schokocraft]

Wait... with download="sourcename" you can tell the browser to download the file? I searched for a method to do exactly that and never found it. Thanks ^^

[jdevcast]

Thanks. A really interesting walkthrough for making a paint app. This should get way more than 10, 000 views.

[pashuaf]

I've made mine with erase and clear tools, brush size, brush type (square, round and butt), color palette on canvas and pure javascript. Cursor size representing brush type equal to a brush size and type is still on my to-do list. Also, I'm not shure how, I'm going to add some history, at least one step back to undo last action.

[captainalpha]

Please teach us algorithms' complexity and big O notation. THANK YOU SIR

[Miikiee]

Do you think you will ever make an electron Tutorial?

[champfisk]

30 - 45 minutes is a good length unless it’s all in one videos. I enjoyed the 2 hour java in one.

[valaydesai]

Awesome 👍 I created a PoC for wellbore trajectory using three.js when the library was a rc. I am sure you can create Paint3d with the current version of three.js. Can you also try to create a small video streaming full stack app ?

[Vlad-fdnv]

SInce you made the maven, hibernate Java EE tutorial do you think you'll make one where you combine that database with a web page? Maybe sth like a form that sends data to the Java app. JSP for example?

[jon]

Do you have any videos where you go over how you plan your projects and figure out your requirements?

[bachaplegic]

Nice! Thanks for creating this tutorial.

[jatinsingh]

add eraser, point and pointed line too please

[aspiringpro]

I'm not sure if you've covered it but how to you erase the things you draw?

[ahmedthebest]

Please can you show us how to create a translator app

[Schokocraft]

Any chance you create a video about how to create a video editor