JavaScript Tutorial 3 Canvas & JSON

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

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

THANK YOU TO MY PATREON SUPPORTERS LIKE :

[exodus]

Thank you Derek!!! This series is just getting better and better!! :)
Much appreciated for the hard work :)

[darkthrongrising]

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.

[libanabdi]

Thank you mr Derek we are with you always and go ahead

[zkfdsldfjsdjfl]

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

[leuciferx]

Hi bro i am from india but I'm bigner in programming but by watching ur video it really amazing

[emilianoriffel]

Your videos are the best. Greetings from Argentina

[masoud]

really great and useful tutorial series on javascript. Thanks Derek

[JG-ghxj]

amazing job Derek, as always!


From Canada

[jonatantisnado]

Did you ever get to the math Mr. Banas? It will be a great contribution.

[kresimircosic]

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.

[RaspberryPieman]

Derek - Another great video, thanks. I am curious about the use of the let statement. I never use it and I am constantly finding it in code from many authors. For example, at 30:00 mins in your video, you entered: let medianAngle = (startAngle + endAngle)/2; then on the next line you entered: xOffset = Math.cos(medianAngle) * 30; In both cases you are creating a new variable, but only using let on the first one, why?
Regards,
Martyn

[alexandros-markovits]

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

[xiaomengli]

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

[milesjake]

I'd like more of math oriented videos

[georgiyzhuravlev]

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

[AbhishekKumar-mqtt]

Thank u for this awesome video and series

[s.rsathvik]

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

[trevorprescott]

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.

[dragongears]

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

[othmane]

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 ?