Home/ Questions/Q 8440401
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T08:17:18+00:00

Just giving canvas a go for the first time with the intention of creating

  • 0

Just giving canvas a go for the first time with the intention of creating a game. I have an image displaying but oddly the fillStyle method doesn’t seem to be working. ( At least the canvas background is still white in google chrome.)

Note that in my code the canvas var is actually the canvas elements 2d context, maybe that’s where i’m getting myself confused? i can’t see the problem, would appreciate if anyone else could.

LD24.js:

const FPS = 30;
var canvasWidth = 0;
var canvasHeight = 0;
var xPos = 0;
var yPos = 0;
var smiley = new Image();
smiley.src = "http://javascript-tutorials.googlecode.com/files/jsplatformer1-smiley.jpg";

var canvas = null;
window.onload = init; //set init function to be called onload

function init(){
    canvasWidth = document.getElementById('canvas').width;
    canvasHeight = document.getElementById('canvas').height;
    canvas = document.getElementById('canvas').getContext('2d');
    setInterval(function(){
        update();
        draw();
    }, 1000/FPS);
}

function update(){

}
function draw()
{
    canvas.clearRect(0,0,canvasWidth,canvasHeight);
    canvas.fillStyle = "#FFAA33"; //orange fill
    canvas.drawImage(smiley, xPos, yPos);

}

LD24.html: 

<html>
    <head>
        <script language="javascript" type="text/javascript" src="LD24.js"></script>
    </head>
    <body>



<canvas id="canvas" width="800" height="600">
    <p> Your browser does not support the canvas element needed to play this game :(</p>
</canvas>

    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    3 notes:

    1. fillStyle does not cause your canvas to be filled. It means that when you fill a shape it will be filled with that color. Therefore you need to write canvas.fillRect( xPos, yPos, width, height).

    2. Wait until your image actually loads, otherwise the rendering may be inconsistent or buggy.

    3. Careful of cross-domain images used in your canvas – most browsers will throw a security exception and stop executing your code.

    • 0