Canvas opaque - change default background color

Question

I'm using canvas.getContext('2d', {alpha: false}); (wiki info) to remove canvas opacity and improve performance of animation. Unfortunately after that, canvas element gain white background. Is there an option to change the default color of canvas background/color?

I tried drawImage() to fill whole area, but (because of animation) I think it is not the best solution:

var canvas = document.querySelector('#mycanvas'),
    ctx = canvas.getContext('2d', {alpha: false});

function run() {
    ctx.clearRect(0, 0, size.width, size.height);

    ctx.drawImage(bg, 0, 0, size.width, size.height);

    draw();
    update();

    requestAnimationFrame(run);
}

I really care about performance, so it would be useful to change the color only once.

Any ideas?

Karmacon Karmacon · Accepted Answer · 2015-10-16T19:58:16

No. The default background is always black.

The CanvasRenderingContext2D.clearRect() method of the Canvas 2D API sets all pixels in the rectangle defined by starting point (x, y) and size (width, height) to transparent black, erasing any previously drawn content.

Instead of clearing the canvas, just set fillRect to fill with the color you want.

var canvas = document.querySelector('#mycanvas'),
    ctx = canvas.getContext('2d', {alpha: false});

function run() {
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, size.width, size.height);

    draw();
    update();

    requestAnimationFrame(run);
}

Canvas opaque - change default background color

1 Answers