Forums » Help » Changing the default canvas background colour?

Hi all,

I cannot for the life of me figure out how to change the default canvas bgcolor from black to white (for instance)

Is it done by extending a method in impact? I could not manage to figure it out in CSS either.

Thanks

I think this is what you are looking for:
http://impactjs.com/documentation/class-reference/system#clear

Thanks Stuart, that did the job - it changed it white but it did overwrote the rest of the entities on the canvas.

I put it inside my draw() function before the this.parent() call.

Was that correct?

If you want to keep changing the clear color then sure its fine in the draw call. But if you just want to set it to a single color then you only need to set it once. For example set it after you load your level.

I usually just set it once in the init of main.js.

Hi everyone,

Thanks again for all the feedback! Based on Stuart's comment and Graphikos, I placed the ig.System.clear('#fff') call inside the init method and it did not work - in fact I got the error that the clear function did not exist.

Maybe I am doing it wrong or maybe it is right - but surely I could not be the first person to come across this.

Thanks again for all your help!

Try this in your init in main.js:

ig.game.clearColor = '#fff';

Impact automatically calls clear for you every frame, using ig.game.clearColor as the color.

Hi Krisjet,

Thanks for that line of code, that worked exactly how I wanted it to.

However, when I had a look at the ImpactJS docs as mentioned by Stuart - using the clear function did not seem to work.

Could anyone explain to me why I have to manually override the variable with ig.game.clearColor rather than use the API?

Thanks,

Ben

If you look at the impact source the clearing the screen is just using the API.

// system.js, line 98

	clear: function( color ) {
		this.context.fillStyle = color;
		this.context.fillRect( 0, 0, this.realWidth, this.realHeight );
	},

If you want to do it yourself you are fully welcome to. Simply set ig.game.clearColor = null; and do your own draw clearing method in the draw method.

That's what I'm doing because instead of a color I'm drawing full background image which effectively "clears" the screen.

Calling clear() yourself is possible also. But if you do it before this.parent(); in your draw method it's just going to get cleared again by the game (unless you had set it to null). Also it's a function of ig.system not ig.System. So ig.system.clear('white');.

@graphikos would you mind posting your implementation? I attempted to write my own clear implementation like so:

{main.js}
{init method}
            this.bgFillImg = new Image();
            this.bgFillImg.src = 'media/tiles/background.png';
	
            // wait for the tile to load before launching the game.
            var self = this;
            this.bgFillImg.onload = function () {
                // load the level
                self.loadLevel.call(self, Level1_1);
            };

 {draw method}
            if (!this.pattern) {
                this.pattern = context.createPattern( this.bgFillImg, "repeat");   
            }
            context.fillStyle = this.pattern;
            context.fill();

but it just shows a lot of image "trails" that never seem to get cleared up.

Quote from Graphikos

... {omitted} ...

That's what I'm doing because instead of a color I'm drawing full background image which effectively "clears" the screen.

nevermind @graphikos, I discovered the flaw in my logic. I was trying to rewrite the wheel, instead of riding on it.

For anyone interested, I dropped the draw code, and I am only using the init code, like so:

            // load the custom background image that fills the canvas during the "clear" call in the system
            this.bgFillImg = new Image();
            this.bgFillImg.src = 'media/tiles/background.png';
	
            // wait for the tile to load before launching the game.
            var self = this;
            this.bgFillImg.onload = function () {
                self.clearColor = ig.system.context.createPattern( this, "repeat");
                // load the level                
                self.loadLevel.call(self, Level1_1);
            };