Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Muhamad Atif
Muhamad Atif
Courses Plus Student 306 Points

Can't add color in Canvas

While working on Randy Hoyt's Code your first HTML5 Game http://teamtreehouse.com/library/coding-your-first-html5-game i am facing an issue

I cant add black colored rectangles when i use the following 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) {
                    window.setTimeout(callback, 1000/60);
                  };

function init () {
    requestAnimFrame(update);

}

function update() {
context.fillRect(10, 10, 40, 380,"#000000");
context.fillRect( 10,  10,  380,  40, "#000000");
context.fillRect( 10, 350, 380,  40, "#000000");
context.fillRect( 350,  10,  40,  380, "#000000");
context.fillRect( 180,  10,  40,  380, "#000000");

requestAnimFrame(update);
}
Randy Hoyt
Randy Hoyt
Treehouse Guest Teacher
Randy Hoyt
Randy Hoyt
Treehouse Guest Teacher

What HTML do you have in the page? The first line looks for a canvas element with an ID of canvas, so you should have this in your HTML:

<canvas id="canvas"></canvas>