HTML5 GAME - context.fillRect

Question

Same question as everyone else: Rectangles won't draw and image doesn't show on canvas!

index.html: <!DOCTYPE html> <html> <head> <title>Game</title> <link rel="stylesheet" href="style.css"> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <script src="game.js"</script> </body> </html>

style.css: body { background: #999999; } canvas { display: block; background: #ffffff; margin: 0 auto; }

game.js: 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); };

var frogX = 65; var frogY = 65;

function init() { requestAnimFrame(update); }

function update() {

frogY = frogY + 3;
context.clearRect (0, 0, 400, 400);
context.drawImage(imgFrog, frogX, frogY, 100, 77);
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, 180, "#000000");

requestAnimFrame(update);

}

Answer 1 · 2016-06-14T04:27:26Z

June 14, 2016 4:27am

It works fine for me! After I replaced the missing frog image file, I see the black container made of rectangles and the frog image moves.

And you believe everyone else has this same issue?

Welcome to the Treehouse Community

Looking to learn something new?

Jason Lee

Jason Lee

HTML5 GAME - context.fillRect

Steven Parker

Steven Parker

1 Answer

Steven Parker

Steven Parker