Bagaimana mengisi seluruh kanvas dengan warna tertentu

Question 1

Cara mengisi seluruh HTML5 <canvas>dengan satu warna.

Saya melihat beberapa solusi seperti ini untuk mengubah warna latar belakang menggunakan CSS tetapi ini bukan solusi yang baik karena kanvas tetap transparan, satu-satunya hal yang berubah adalah warna ruang yang ditempati.

Cara lainnya adalah dengan membuat sesuatu dengan warna di dalam kanvas, misalnya persegi panjang ( lihat di sini ) tetapi tetap tidak memenuhi seluruh kanvas dengan warna (jika kanvas lebih besar dari bentuk yang kita buat).

Adakah solusi untuk mengisi seluruh kanvas dengan warna tertentu?

Question 2

Ya, cukup isi Rectangle dengan warna solid di sepanjang kanvas, gunakan heightdan widthdari kanvas itu sendiri:

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

Luaskan cuplikan

Question 3

Jika Anda ingin membuat latar belakang secara eksplisit , Anda harus yakin bahwa Anda menggambar di belakang elemen saat ini di kanvas.

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>

Luaskan cuplikan

Question 5

Anda dapat mengubah latar belakang kanvas dengan melakukan ini:

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

Question 6

Anda tahu, ada perpustakaan lengkap untuk grafik kanvas. Ini disebut p5.js Anda dapat menambahkannya hanya dengan satu baris di elemen kepala Anda dan file sketch.js tambahan.

Lakukan ini pada tag html dan badan Anda terlebih dahulu:

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

Tambahkan ini ke kepala Anda:

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

File sketch.js

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