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

Question 1

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?

Question 2

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

Question 3

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

Question 4

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

Question 5

Puede cambiar el fondo del lienzo haciendo esto:

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

Question 6

¿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);
}