CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
Holly
Holly

Reputation: 1976

html5 canvas context .fillStyle not working

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>

Upvotes: 5

Views: 17271

Answers (4)

joeblog
joeblog

Reputation: 1225

I just encountered a similar problem where I wanted to iteratively draw either black or white circles, but instead got ones all the same color. Turned out the magic incantation was ctx.beginPath(); for each "counter", else they were all colored whatever the last ctx.fillStyle = "color" was.

function drawCounters(ctx) {
  ctx.save();
  counters.forEach(function(counter) {
    ctx.fillStyle = colours.dict[counter.base[3]];
    ctx.beginPath();
    ctx.arc(counter.x1, counter.y1, gm.board.cellLength * 0.4, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fill();
  });
  ctx.restore();
}

Upvotes: 0

Carlits
Carlits

Reputation: 1

Or maybe you were just missing

canvas.fill();

after

canvas.drawImage(smiley, xPos, yPos);

Upvotes: 0

C..
C..

Reputation: 802

Wait till image loads as well:

var img = new Image();
img.onload = function() {
    handleLoadedTexture(img);
};
img.src = "image.png";

function handleLoadedTexture(img) {
    //call loop etc that uses image
};

Upvotes: 1

Jakub Hampl
Jakub Hampl

Reputation: 40543

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.

Upvotes: 4

Related Questions