Como preencher toda a tela com uma cor específica?

95

Como preencher todo o HTML5 <canvas>com uma cor.

Já vi algumas soluções como essa para mudar a cor do fundo usando CSS mas essa não é uma boa solução já que o canvas fica transparente, a única coisa que muda é a cor do espaço que ocupa.

Outra é criar algo com a cor dentro da tela, por exemplo, um retângulo ( veja aqui ), mas ainda não preenche toda a tela com a cor (caso a tela seja maior que a forma que criamos).

Existe uma solução para preencher toda a tela com uma cor específica?

javascript html canvas Enve
fonte

Respostas:

156

Sim, basta preencher um retângulo com uma cor sólida na tela, usar o heighte widthda própria tela:

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">
Expandir snippet

Spencer Wieczorek
fonte
21

Se você quiser fazer o plano de fundo explicitamente , deve ter certeza de desenhar atrás dos elementos atuais na tela.

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);
nikk wong
fonte
4
Obrigado por perceber que as pessoas podem não querer apenas um bloco de cor como uma imagem!
FamousAv8er de
7

Você pode alterar o plano de fundo da tela fazendo o seguinte:

<head>
    <style>
        canvas {
            background-color: blue;
        }
    </style>
</head>
Hednek
fonte
1
@Enve disse que não queria usar CSS.
6 

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>
Expandir snippet

Carlos Enrique Hernndez Hernnd
fonte
0

Quer saber, existe uma biblioteca inteira para gráficos de tela. Ele é chamado de p5.js. Você pode adicioná-lo com apenas uma linha em seu elemento head e um arquivo sketch.js adicional.

Faça isso com suas tags html e body primeiro:

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

Adicione isto à sua cabeça:

<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>

O arquivo sketch.js

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(r, g, b);
}
Kingmanas
fonte
1
Observe que p5.jsé 340kBminimizado e compactado com gzip! Eu diria que esta página contém algumas opções um pouco mais leves ..
kano
@kano Escrevi esta resposta quando era apenas um novato. Já faz muito tempo.
kingmanas
0

Não precisamos acessar o contexto da tela.

Implementando hednek em JS puro você obteria canvas.setAttribute('style', 'background-color:#00F8'). Mas meu método preferido requer a conversão do caso kabab em camelCase .

canvas.style.backgroundColor = '#00F8'

A. West
fonte