पूरे कैनवास को विशिष्ट रंग से कैसे भरें?

Question 1

पूरे HTML5 <canvas>को एक रंग से कैसे भरें ।

मैंने सीएसएस का उपयोग करके पृष्ठभूमि के रंग को बदलने के लिए इस तरह के कुछ समाधानों को देखा, लेकिन यह एक अच्छा समाधान नहीं है क्योंकि कैनवास पारदर्शी रहता है, केवल एक चीज है जो उस स्थान के रंग को बदलता है जो वह व्याप्त है।

एक और एक कैनवास के अंदर रंग के साथ कुछ बनाकर है, उदाहरण के लिए, एक आयत ( यहाँ देखें ) लेकिन यह अभी भी पूरे कैनवास को रंग से नहीं भरता है (यदि कैनवास हमारे द्वारा बनाई गई आकृति से बड़ा है)।

क्या एक विशिष्ट रंग के साथ पूरे कैनवास को भरने के लिए एक समाधान है?

Question 2

हां, बस कैनवास के पार एक ठोस रंग के साथ एक आयत भरें, heightऔर widthकैनवास का स्वयं उपयोग करें :

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

स्निपेट का विस्तार करें

Question 3

यदि आप पृष्ठभूमि को स्पष्ट रूप से करना चाहते हैं , तो आपको निश्चित होना चाहिए कि आप कैनवास पर वर्तमान तत्वों के पीछे आकर्षित हों ।

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

आप ऐसा करके कैनवास की पृष्ठभूमि बदल सकते हैं:

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

Question 5

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>

स्निपेट का विस्तार करें

Question 6

आपको पता है कि, कैनवास ग्राफिक्स के लिए एक पूरी लाइब्रेरी है। इसे p5.js कहा जाता है। आप इसे अपने हेड एलिमेंट में सिर्फ एक लाइन और एक अतिरिक्त स्केच.जेएस फाइल के साथ जोड़ सकते हैं।

पहले अपने html और बॉडी टैग के लिए ऐसा करें:

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

इसे अपने सिर में जोड़ें:

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

स्केच.जेएस फ़ाइल

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

Question 7

हमें कैनवास संदर्भ तक पहुंचने की आवश्यकता नहीं है।

शुद्ध जेएस में hednek को लागू करने से आपको मिलेगा canvas.setAttribute('style', 'background-color:#00F8')। लेकिन मेरे पसंदीदा तरीके को कबाब-केस को कैमलकेस में बदलने की आवश्यकता है ।

canvas.style.backgroundColor = '#00F8'