• Saturday , 21 September 2019

JavaScript Tutorial 7 Paint App Canvas API

Code Canyon



Code & Images Here : http://bit.ly/JSPaint
Best JavaScript Book : https://amzn.to/2GcKzQk
Subscribe to Me : http://bit.ly/2FWQZTx

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

►► JavaScript in 1 Video : https://youtu.be/fju9ii8YsGs
►► CSS in 1 Video : https://youtu.be/CUxH_rWSI1k
►► Bootstrap Tut : https://youtu.be/gqOEoUR5RHg
►► MongoDB Tut : https://youtu.be/-0X8mr6Q8Ew
►► JQuery Tut : https://youtu.be/BWXggB-T1jQ
►► Express / Node Tut : https://youtu.be/xDCKcNBFsuI

Like the channel? Consider becoming a Patreon! Check it out here:
►► https://www.patreon.com/derekbanas

THANK YOU TO MY PATREON SUPPORTERS LIKE :

ckcoder.com
vsolutions.be

Original source

3d Ocean

Related Posts

37 Comments

  1. saltycd
    August 17, 2019 at 15:47

    And here comes 10k views!

  2. Sahej Bhatia
    August 17, 2019 at 15:47

    can you make website and use python in the backend

  3. Barnard Rabenold
    August 17, 2019 at 15:47

    You've mentioned the line:
    ctx = canvas.getContext('2D');

    Does Canvas provide support for 3D graphics and animation?

  4. Pavel Afonin
    August 17, 2019 at 15:47

    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.

  5. JDevCast
    August 17, 2019 at 15:47

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

  6. AzSa5z1n
    August 17, 2019 at 15:47

    best youtube coder imo

  7. Ahmed Fathy
    August 17, 2019 at 15:47

    could you make Mathematica 1 video tutorial, please? 🙂

  8. Vlad Pasarin
    August 17, 2019 at 15:47

    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?

  9. king Solomon
    August 17, 2019 at 15:47

    Make a Vue.js tutorial Series

  10. shrpdrts
    August 17, 2019 at 15:47

    Just what i need

  11. Masoud Rousta
    August 17, 2019 at 15:47

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

  12. Bareera Khan
    August 17, 2019 at 15:47

    Oh! man, when will you hit 1M.

  13. Ahmed Samy
    August 17, 2019 at 15:47

    Please can you make tickets to do speech I have

  14. Ahmed Samy
    August 17, 2019 at 15:47

    Please can you show us how to create a translator app

  15. SamT
    August 17, 2019 at 15:47

    Great tut Derek. Superb

  16. Hepi
    August 17, 2019 at 15:47

    Great beginning of this tut 😀

  17. im hark
    August 17, 2019 at 15:47

    Can you make an instagram turbo ?

  18. Julian Cobos
    August 17, 2019 at 15:47

    Loved seeing you Implement JavaScript classes. Looking forward to Part 2

  19. Schoko4craft
    August 17, 2019 at 15:47

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

  20. Schoko4craft
    August 17, 2019 at 15:47

    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 ^^

  21. avi12
    August 17, 2019 at 15:47

    3:46 If you're going to recreate Photoshop, at least use WebAssembly
    Alternatively, https://www.youtube.com/watch?v=PHKLzpt-syI

  22. Veinq
    August 17, 2019 at 15:47

    Watch @2x. JavaScript starts at 9:25

    Thanks for the video Derek

  23. Bini Alemayehu
    August 17, 2019 at 15:47

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

  24. Zain
    August 17, 2019 at 15:47

    Awesome..

  25. Champ Fisk
    August 17, 2019 at 15:47

    Also how are you randomly using ctx as if it’s a library in itself?

  26. Champ Fisk
    August 17, 2019 at 15:47

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

  27. Champ Fisk
    August 17, 2019 at 15:47

    Class is a smoke in mirrors concept in JavaScript?

  28. Osvaldo Salmeron-Lagunas
    August 17, 2019 at 15:47

    Dude you fke’n rock ! I’m glad you’re on this earth . Blessed !

  29. Poil Lokm
    August 17, 2019 at 15:47

    What editier do you use?

  30. Jon
    August 17, 2019 at 15:47

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

  31. Mike
    August 17, 2019 at 15:47

    Do you think you will ever make an electron Tutorial?

  32. Valay Desai
    August 17, 2019 at 15:47

    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 ?

  33. Akagami Ng
    August 17, 2019 at 15:47

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

  34. Bassu Miah
    August 17, 2019 at 15:47

    Nice! Thanks for creating this tutorial.

  35. Exodus
    August 17, 2019 at 15:47

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

  36. Kar Lee
    August 17, 2019 at 15:47

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

  37. Captain Alpha
    August 17, 2019 at 15:47

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

Leave A Comment

You must be logged in to post a comment.