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”
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 ?
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.
Great video!.. thanks
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.
You are great Derek!
my but lool 🙂 4:25
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.
I'd like more of math oriented videos
Shouldn't the i variables in the for loops be defined with let or var so that they are local variables instead of global?
With all respect to author (I'm a subscriber!), it's funny to see all these `for` loops nowadays.
Congrats for the awesome tutorial and because you have just gone over 1000 videos on youtube, this is 1001. Thank you very much.
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.
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?
I'm from the future and Derek's got more subs than pewdiepie
You should do another Q&A video. It would be great.
really great and useful tutorial series on javascript. Thanks Derek
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.
I hope there is going to be a lot more to come am loving it
amazing job Derek, as always!
From Canada
New plan on how to spend free time during the summer: Learn JS from Derek 🙂
Thank you Derek, waiting for the things that will follow up in this tutorial 🙂