Comment remplir toute la toile avec une couleur spécifique

Question 1

Comment remplir tout le HTML5 <canvas>avec une couleur.

J'ai vu des solutions comme celle- ci pour changer la couleur de fond en utilisant CSS mais ce n'est pas une bonne solution puisque le canevas reste transparent, la seule chose qui change est la couleur de l'espace qu'il occupe.

Une autre consiste à créer quelque chose avec la couleur à l'intérieur de la toile, par exemple un rectangle ( voir ici ) mais cela ne remplit toujours pas la toile entière avec la couleur (au cas où la toile serait plus grande que la forme que nous avons créée).

Existe-t-il une solution pour remplir toute la toile avec une couleur spécifique?

Question 2

Oui, remplissez simplement un rectangle avec une couleur unie sur le canevas, utilisez le heightet widthdu canevas lui-même:

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

Développer l'extrait

Question 3

Si vous voulez faire l'arrière-plan explicitement , vous devez être certain de dessiner derrière les éléments actuels sur le canevas.

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>

Développer l'extrait

Question 5

Vous pouvez modifier l'arrière-plan du canevas en procédant comme suit:

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

Question 6

Vous savez quoi, il existe une bibliothèque entière pour les graphiques de toile. Il s'appelle p5.js. Vous pouvez l'ajouter avec une seule ligne dans votre élément head et un fichier sketch.js supplémentaire.

Faites-le d'abord à vos balises html et body:

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

Ajoutez ceci à votre tête:

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

Le fichier sketch.js

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