Welcome to the Treehouse Community
The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Sam Bazalo
34 PointsWhat are the vertical red lines in the tutorial code?
I am having trouble with some of my code. I am doing the 'code your first HTML5 Game' with Randy Hoyt.
https://teamtreehouse.com/library/coding-your-first-html5-game
What are the vertical red lines he has at the end of the window. lines, about 11:50 in to the video?
I am getting an error pointing to the line after all these window. lines so I think I have missed something.
Here's my code
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d")
imgFrog = new Image();
imgFrog.src = "Images/mikethefrog.png";
imgFrog.addEventListener("load",init, false);
var requestAnimFrame =
window.requestAnimationFrame
window.webkitRequestAnimationFrame
window.mozRequestAnimationFrame
window.oRequestAnimationFrame
window.msRequestAnimationFrame
function (callback) { //Receiving a console error on this line//
window.setTimeout(callback, 1000/60);
};
function init() {
requestAnimFrame(update);
}
function update() {
context.fillRect( 10, 10, 40, 380, "#000000");
requestAnimFrame(update);
}
1 Answer

Robert Richey
Courses Plus Student 16,352 PointsHi Sam,
Those lines represent the logical OR operator. You can fix your code by adding these operators just like in the video - two vertical bars.
var requestAnimFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) { //Receiving a console error on this line//
window.setTimeout(callback, 1000/60);
};
As Randy explains, requestAnimationFrame
does not have standard support across browsers. If a browser doesn't recognize the first value window.requestAnimationFrame
then it will try the next value, all the way down to actually defining a custom requestAnimationFrame if needed.
Hope this helps,
Cheers
Sam Bazalo
34 PointsSam Bazalo
34 PointsCheers Richie McCaw. guru!