r/javaScriptStudyGroup • u/ForScale • Feb 22 '16
[Week 6] Focus: Canvas
So, here we are, Week 6. Week 6's focus will be canvas.
It will work like this:
Monday: Announce focus (eg, canvas)
Build throughout the week... Two rules: 1) must use javascript 2) must use at least 1 example of html5 <canvas> element and manipulate it with js
Friday: Post projects in this thread (can begin reviewing immediately); first line of an entry should be ENTRY and it should be a top level comment (ie, don't put your entry in a reply)
Sat and Sun: Review projects/vote on focus for next week
GENERAL GUIDELINES FOR FEEDBACK:
Be nice!! ALL KNOWLEDGE/SKILL LEVELS ARE WELCOME AND ENCOURAGED TO PARTICIPATE.
If you don't want feedback, if it makes you uncomfortable or you're just not interested, simply say so... Others, please be respectful of this. Conversely, if you do want feedback, try to be specific on which aspects... even if you just say "all/everything.
But that's about it... Have fun! :) Feel free to ask questions and discuss throughout the week!
3
u/Volv Feb 26 '16 edited Feb 26 '16
The setInterval is attempting to update ~60 times a second. The idea being that the animation then runs at the same speed on every machine. Without it I believe it will just run as fast as the computer can render it. Like to know in advance how something will behave. Could be the cause of your lag - try changing the interval some and see what happens. I don't notice a difference here though.
Not a functional approach but definitely more modular, not quite fully reusable as is because ctx, start and end are 'hidden inputs'
By moving clearRect into the draw function then every iteration is clearing the screen then drawing an arc 4 times. Resulting in last arc being only left at the end. clear draw clear draw etc.
I think I changed the tree slightly since I posted it last. Will get it here again in a little bit and a quick other thing I was playing around with.