Cómo llenar todo el lienzo con un color específico.

92

Cómo llenar HTML5 completo <canvas>con un solo color.

Vi algunas soluciones como esta para cambiar el color de fondo usando CSS pero esta no es una buena solución ya que el lienzo permanece transparente, lo único que cambia es el color del espacio que ocupa.

Otro es crear algo con el color dentro del lienzo, por ejemplo, un rectángulo ( ver aquí ) pero aún no llena todo el lienzo con el color (en caso de que el lienzo sea más grande que la forma que creamos).

¿Existe una solución para llenar todo el lienzo con un color específico?

javascript html canvas Enve
fuente

Respuestas:

150

Sí, solo complete un Rectángulo con un color sólido en el lienzo, use heighty widthdel lienzo en sí:

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 fragmento

Spencer Wieczorek
fuente
17

Si desea hacer el fondo explícitamente , debe asegurarse de dibujar detrás de los elementos actuales en el lienzo.

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
fuente
4
¡Gracias por darse cuenta de que es posible que la gente no solo quiera un bloque de color como imagen!
FamousAv8er
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 fragmento

Carlos Enrique Hernández Hernnd
fuente
6

Puede cambiar el fondo del lienzo haciendo esto:

<head>
    <style>
        canvas {
            background-color: blue;
        }
    </style>
</head>
hednek
fuente
1
@Enve dijo que él o ella quería que no usara CSS.
0

¿Sabes qué? Hay una biblioteca completa para gráficos de lienzo. Se llama p5.js. Puede agregarlo con una sola línea en su elemento principal y un archivo sketch.js adicional.

Haga esto con sus etiquetas html y body primero:

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

Agrega esto a tu cabeza:

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

El archivo sketch.js

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(r, g, b);
}
kingmanas
fuente
¡Tenga en cuenta que p5.jsestá 340kBminimizado y comprimido con gzip! Yo diría que esta página contiene algunas opciones un poco más ligeras ..
kano
@kano Escribí esta respuesta cuando era solo un novato. Ha pasado mucho tiempo desde entonces.
kingmanas