Ok! I solved the problem.
Chapter One - Multiple Canvases
I started to make pong utilizing requestAnimationFrame and I noticed that the ball was stuttering and slowing down every 3-4 seconds. So I implemented a crude FPS function to write the current fps to the screen and realized that the slow down was accompanied by an fps drop to 30fps. I thought it had something to do with my collision detection function, but it was not the case.
MarkR noticed that I had two canvases drawing and updating the player/ball separately, he suggested that I combine the two canvases into one. This produced better performance and now I could only see the slow-down/stuttering every 15~ seconds. The problem was, the stuttering was still happening.
Chapter Two - Vsync, Chrome Developer Tools
In comes Dreta! Dreta said that the fps was dropping to 30fps because canvas is trying to Vsync. I had no idea what he was talking about, so I asked Mr. Google and found a really good explanation of how Vsync/double-buffering/triple-buffering works. It's a medium read, but it it definitely worth checking out if you want to learn more about how your graphics card/monitor works.
He also told me that I can look at the fps of the game in Chrome by using the Developer Tool(which can be accessed by right-clicking -> inspect element -> Timeline tab and clicking on the black circle at the bottom-- the circle will turn red when recording). You can also look at the memory usage and I noticed that it was periodically shooting up to 4mbs of memory used. Dreta suggested it was a memory leak--
Chapter Three - Memory Leaks
To locate a memory leak, use the following process: Found at microsoft site (http://msdn.microsoft.com/en-us/library/ms859415.aspx)
Dreta suggested that I use heap profiling to find memory leaks. I personally have not read up on it yet, but here's a link to chrome's explanation of heap profiling developers.google.com/chrome-developer-tools/docs/heap-profiling.
He said:
Each time you update the player, you're creating a function. You probably want to change the Player class from:
this.update = function() {
$("#c").mousemove(function(event) {
tempY = event.pageY;
});
this.y = tempY;
}
which creates a function every 16ms I update the player
to:
var that = this;
$("#c").mousemove(function(event) {
that.y = event.pageY;
});
This helped optimize the game further.
Chapter Four - I'm stupid, yeah... Chrome Tabs + Memory
I remembered that there was an issue with chrome with multiple tabs open, and I decided to quit out of and restart chrome anew. Behold! Constant 60fps and 1-2.5 mb memory usage(where it was 2-4mb memory usage before).
Moral of the story... close down all tabs and restart chrome before determining the problem, and use heap profiling to locate memory leaks.
Thank you everyone for your help! I really do appreciate it.
Here's the code on github. Please let me know if you find more stupid mistakes or you have general tips on working with canvas/programming.
Feel free to email me [email protected]