D4mations.com

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

d4mer

, , , , ,

29 responses to “JavaScript Tutorial 6 Canvas API Trigonometry”

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

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

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

  5. 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 🙂

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

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

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

  16. 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!

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

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

Leave a Reply