JavaScript Tutorial 3 Canvas & JSON




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.

RELATED 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

THANK YOU TO MY PATREON SUPPORTERS LIKE :

ckcoder.com
vsolutions.be

Original source


21 responses to “JavaScript Tutorial 3 Canvas & JSON”

  1. 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.

  2. 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.

  3. 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.

  4. 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?

Leave a Reply