How to fill the whole canvas with specific color?

Question

How to fill the whole HTML5 <canvas> with one color.

I saw some solutions such as this to change the background color using CSS but this is not a good solution since the canvas remains transparent, the only thing that changes is the color of the space it occupies.

Another one is by creating something with the color inside the canvas, for example, a rectangle(see here) but it still does not fill the whole canvas with the color (in case the canvas is bigger than the shape we created).

Is there a solution to fill the whole canvas with a specific color?

score 259 · Accepted Answer · edited Feb 15 '21 at 09:41

259

Yes, fill in a Rectangle with a solid color across the canvas, use the height and width of the canvas itself:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);

canvas{ border: 1px solid black; }

<canvas width=300 height=150 id="canvas">

edited Feb 15 '21 at 09:41

Kees de Kooter

7,078
5
38
45

answered Jan 02 '15 at 01:14

Spencer Wieczorek

21,229
7
44
54

This helped me immensely! Thanks – Vani Gupta May 26 '21 at 12:22
3

``ctx.fillStyle="rgb(0,0,255)"`` [fillStyle](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle) – Carson Jul 15 '21 at 14:31

score 39 · Answer 2 · answered May 10 '19 at 23:14

39

If you want to do the background explicitly, you must be certain that you draw behind the current elements on the canvas.

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// Add behind elements.
ctx.globalCompositeOperation = 'destination-over'
// Now draw!
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);

answered May 10 '19 at 23:14

nikk wong

8,059
6
51
68

7

Thank you for realizing people may not just want a block of color as an image! – FamousAv8er Aug 15 '19 at 15:23
This should actually be `destination-under`, and it should be the first operation on the canvas. – Ciprian Feb 09 '22 at 17:00

score 20 · Answer 3 · edited Aug 27 '20 at 13:17

20

You can change the background of the canvas by doing this:

<head>
    <style>
        canvas {
            background-color: blue;
        }
    </style>
</head>

edited Aug 27 '20 at 13:17

Nanoo

836
8
16

answered Apr 26 '18 at 21:24

hednek

227
2
2

2

@Enve said that he or she wanted it to not be using CSS. – May 29 '18 at 00:41
8

Not useful for OP. But perhaps useful for people searching for the question in the title. – Dror Bar Feb 01 '21 at 08:26

score 8 · Answer 4 · edited Oct 12 '18 at 07:06

8

let canvas = document.getElementById('canvas');
canvas.setAttribute('width', window.innerWidth);
canvas.setAttribute('height', window.innerHeight);
let ctx = canvas.getContext('2d');

//Draw Canvas Fill mode
ctx.fillStyle = 'blue';
ctx.fillRect(0,0,canvas.width, canvas.height);

* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow: hidden; }

<canvas id='canvas'></canvas>

edited Oct 12 '18 at 07:06

Pankaj Bisht

986
1
8
27

answered Apr 10 '18 at 04:41

Carlos Enrique Hernndez Hernnd

81
1
2

score 4 · Answer 5 · answered Nov 18 '20 at 15:09

4

We don't need to access the canvas context.

Implementing hednek in pure JS you would get canvas.setAttribute('style', 'background-color:#00F8'). But my preferred method requires converting the kabab-case to camelCase.

canvas.style.backgroundColor = '#00F8'

answered Nov 18 '20 at 15:09

A. West

571
5
12

Adding Shapes Dynamically can have problem to show with this approach – titusfx Feb 25 '22 at 12:31

score -1 · Answer 6 · edited Aug 27 '20 at 16:08

-1

You know what, there is an entire library for canvas graphics. It is called p5.js You can add it with just a single line in your head element and an additional sketch.js file.

Do this to your html and body tags first:

<html style="margin:0 ; padding:0">
<body style="margin:0 ; padding:0">

Add this to your head:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>
<script type="text/javascript" src="sketch.js"></script>

The sketch.js file

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(r, g, b);
}

edited Aug 27 '20 at 16:08

Nanoo

836
8
16

answered Jul 16 '18 at 14:18

Manas Singh

65
1
12

1

Note that `p5.js` is `340kB` minizied _and_ gzipped! I'd say this page contains some slightly more lightweight options.. – kano Dec 14 '19 at 13:12
@kano I wrote this answer when I was just a noob. It's been a long time since. – Manas Singh Dec 14 '19 at 13:18

How to fill the whole canvas with specific color?

6 Answers6

Linked

Related