• Thursday , 28 May 2020

JavaScript Tutorial 3 Canvas & JSON

Code Canyon

Get the Code : http://bit.ly/JSTut3
Best JavaScript Book : https://amzn.to/2GcKzQk
Subscribe to Me : http://bit.ly/2FWQZTx

I continue teaching JavaScript and JavaScript related libraries and frameworks. This time I’ll show how to pull user provided JSON data from a page and then create a randomly generated pie chart using Canvas. Along the way we’ll learn how to randomly generate color hex codes, parse JSON data, explode pie charts, and the math behind drawing on canvas.

This 32 minute tutorial only has one 5 second skippable ad. Please consider not Ad Blocking it so that I can continue making free tutorials.


►► JavaScript in 1 Video : https://youtu.be/fju9ii8YsGs
►► 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



Original source

3d Ocean

Related Posts


  1. tanjamado
    December 19, 2019 at 07:59

    Hey derek, great video man thank you for your explanation ! I just have a simple question, why do you use let and not var, and what's the difference between them ?

  2. Krešimir Ćosić
    December 19, 2019 at 07:59

    I feel great things would be achievable if fate was kind and you were a mentor in college. I cannot even fathom how much wasted potential there is in large places such as China and India… Thank you boss.

  3. George Bush
    December 19, 2019 at 07:59

    Great video!.. thanks

  4. Ajith O M
    December 19, 2019 at 07:59

    Hello Derek, Your videos are so amazing and great to follow up and learn. I would like you to put a video about web designing and architecture. Basically I would like you to explain how a web application works. For example; a web application of java ee,angular,java script works over the internet. Please explain about the server and everything included. Thank you so much. I would like to know the designing and engineering side from you.

  5. Currant
    December 19, 2019 at 07:59

    You are great Derek!

  6. تقنيتي Taknity
    December 19, 2019 at 07:59

    my but lool 🙂 4:25

  7. Trevor Prescott
    December 19, 2019 at 07:59

    Great tutorial! but I am getting this weird bug. For some reason I have to press the button twice to get the initial graph. I did some debugging and for some reason on the initial run createPercentArray() and createRandomColorArray() don't start.

  8. Jake Miles
    December 19, 2019 at 07:59

    I'd like more of math oriented videos

  9. Art Dahm
    December 19, 2019 at 07:59

    Shouldn't the i variables in the for loops be defined with let or var so that they are local variables instead of global?

  10. Georgiy Zhuravlev
    December 19, 2019 at 07:59

    With all respect to author (I'm a subscriber!), it's funny to see all these `for` loops nowadays.

  11. Paulo Alcobia
    December 19, 2019 at 07:59

    Congrats for the awesome tutorial and because you have just gone over 1000 videos on youtube, this is 1001. Thank you very much.

  12. Niush Sitaula
    December 19, 2019 at 07:59

    Just wanted to Point out that the Create Random Color function when converting to base 16 might not always be 6 character length. For example, if the output was 0fffff, then the hex would be #fffff neglecting the 0 at the start which is Invalid color code.

    Waiting for Advanced Node.js in this series, college is almost done and I can learn with more freedom.

  13. Champ Fisk
    December 19, 2019 at 07:59

    I don’t quite understand how you’re using ctx. Example ctx.fillstyle, ctx.fill etc. my only reference is java and when we do such things we have to instantiate off some class. I only see you passing ctx into a draw method around line 170 and then. You’re able to use it like it’s an instant of a class by calling methods and other properties. Any insight or help you can think of to get me over the hump?

  14. Sathvik S.R
    December 19, 2019 at 07:59

    I'm from the future and Derek's got more subs than pewdiepie

  15. Sathvik S.R
    December 19, 2019 at 07:59

    You should do another Q&A video. It would be great.

  16. Masoud Rousta
    December 19, 2019 at 07:59

    really great and useful tutorial series on javascript. Thanks Derek

  17. Robert Williams
    December 19, 2019 at 07:59

    I haven't even watched it yet and I know it's going to be good. I love that you move quickly the way you do, it puts my mind into high gear.

  18. Bugatti Veyron
    December 19, 2019 at 07:59

    I hope there is going to be a lot more to come am loving it

  19. JJ G
    December 19, 2019 at 07:59

    amazing job Derek, as always!

    From Canada

  20. Xiaomeng Li
    December 19, 2019 at 07:59

    New plan on how to spend free time during the summer: Learn JS from Derek 🙂

  21. Alexandros Markovic
    December 19, 2019 at 07:59

    Thank you Derek, waiting for the things that will follow up in this tutorial 🙂

Leave A Comment

You must be logged in to post a comment.