JavaScript Tutorial 6 Canvas API Trigonometry



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

In this tutorial I teach a Ton about Canvas and All of the Trigonometry you need to make games and graphics programs while making a real project. I walk you step-by-step through the design of the app. If you want to get good at designing real applications then this tutorial is for you.

This nearly 40 minute tutorial contains only one 5 second skippable ad. If you think tutorials like this should remain free, please consider turning off Ad Blockers.

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

29 thoughts on “JavaScript Tutorial 6 Canvas API Trigonometry

  • April 3, 2020 at 19:19
    Permalink

    Should the drawLine() function have something like the below included?:
    ctx.strokeStyle = strokeColor;

    ctx.lineWidth = lineWidth;

    I don't understand why it would have those arguments in it.

  • April 3, 2020 at 19:19
    Permalink

    Loved the video. Was very clear. However, I think that at 15:53 the first two lines of the function drawLine() should have been:
    ctx.strokeStyle = strokeColor;
    ctx.strokeStyle = lineWidth;
    It didn't really matter because you wanted the values to be the same for the line and the circle and you had already set the ctx attributes in drawCircle().

    NB. Not really well versed or anything I just noticed it as I was watching the video.

  • April 3, 2020 at 19:19
    Permalink

    I have a request, I recently had to create a custom simple slider with jQuery, but I just used it to mostly select and each() on certain things. I think that would be a nice project for you as well. What I made was kind of meh, it works, but it's got some artefacts and I probably won't get the job but the experience suited me great. Doing that and watching these videos is helping me get in the thought process. It also had to be infinite, that might be toggleable in your case, but yeah. Cheers!

  • April 3, 2020 at 19:19
    Permalink

    These videos really are good! I've got an interesting language if you're interested: CUDA! Let's you program (NVIDIA) GPUs – and that would be interesting to see as opposed to always programming CPUs 🙂

  • April 3, 2020 at 19:19
    Permalink

    Hi Derek !can you suggest me which programming language should I learn first ..I have no idea to learn which language first please suggest me …have a nice day Derek ! Hope you will see this

  • April 3, 2020 at 19:19
    Permalink

    Cool,
    Can you please recommend some guide if I want to have a flowchart of pictures, with clickable images that make a boarder around all the clicked img, and add a "about text" them into a table below the hole flowchart?

  • April 3, 2020 at 19:19
    Permalink

    Hello Sir Derek. I love your tutorials because you're so good at explaining things. I would like to humbly ask if you can make a "Learn in 1 vid" about how to use github or "git" or something similar to that. I tried searching and watching some videos and read about it. But I don't get it. Thank you very much.

  • April 3, 2020 at 19:19
    Permalink

    I just finished my last final for my last class yesterday, and I'm so happy I aced everything. I couldn't have done it without you, seriously. I feel like I owe you so much. I'm convinced I just opened the door the walk out of destitution with my new degree. You made this massive paradigm change in my life possible. Thank you.

  • April 3, 2020 at 19:19
    Permalink

    What a gem of a tutorial! Thank you for sharing your work with everyone, Derek. I am very new to web development and your tutorials are inspirational. Maybe one day you could put together a ‘throwback tutorial ‘, say with Fortran to make a weather model, for example. Not that it would likely have the widespread relevance JS has, but it surely would have educational benefits. Again, thanks!

  • April 3, 2020 at 19:19
    Permalink

    This one is wicked, will have to go over all of this drawing a few times, but at least the math makes good sense!

  • April 3, 2020 at 19:19
    Permalink

    Another excellent tutorial! Thank you very much.

    Just a few things I thought I'd point out, in the drawLine function you have it take values for strokeColour and lineWidth, but you never use them in the function, I assumed that was being used in the same way as the drawRectangle and drawCircle function, and it's not a particularly big issue as it inherits the values used for the drawCircle function before it, but I just thought I'd mention it in case it was accidental.

    Additionally, in the drawTriangle function, you essentially rewrite the drawLine function twice for the hypotenuse and the opposite. Again not sure if that was on purpose but just thought I'd let you know.

    Once again a wonderful tutorial! Thank you for all the hard work you do

  • April 3, 2020 at 19:19
    Permalink

    You should have first explained how canvas programming works, then explain how to build this application

  • April 3, 2020 at 19:19
    Permalink

    Hey Derek. Please, instead of making some sort of a project and then remaking it inside a video, just start a project from scratch, maybe get some inspiration from another one's work, so you can show the thinking process as well
    Because, to just list all the function names one by one (7:30) and you know exactly what you need, It's kind of pointless, since, in a real-world project, it's not necessarily like this – you have to constantly check what have you done and what's left to do, and then you have to think of how to achieve what you need to do

  • April 3, 2020 at 19:19
    Permalink

    I can't get over you at times…I'm reading Calculus for Dummies and going over JavaScript at the same time…Very convenient. Thank you again..! Peace 🙂

  • April 3, 2020 at 19:19
    Permalink

    These projects are really cool, also they are helpful to see Math concepts in action
    Thanks Derak

  • April 3, 2020 at 19:19
    Permalink

    Excellent as usual. Would you consider doing a video on GLSL? I’ve watched quite a few, but your teaching style is by far my favorite.

Leave a Reply