एचटीएमएल कैनवास
In this page:
<canvas id="id" width="width" height="height"></canvas>
<script>
const ctx = document.getElementById("id").getContext("2d");
// draw with ctx
</script>Canvas कंटेनर
canvas टैग आपके वेबपेज पर एक खाली ड्राइंग बोर्ड डिफाइन करता है। यह एक साधारण कंटेनर एलिमेंट है जिसे अपना resolution तय करने के लिए स्पष्ट width और height attributes की ज़रूरत होती है, और पुराने ब्राउज़र के लिए इसके अंदर कुछ fallback टेक्स्ट की भी।
- हमेशा HTML attributes का उपयोग करके अपने canvas का resolution तय करें, और एलिमेंट को डायनामिक रूप से स्केल करने के लिए CSS का उपयोग करें।
- Accepted attributes:
- width — integer pixels (default 300)
- height — integer pixels (default 150)
- id — for scripting via getElementById
उदाहरण: The Canvas Container
<canvas id="myCanvas" width="300" height="150">
Your browser does not support the canvas element.
</canvas>Drawing Context
अपने canvas पर ड्रॉ करने से पहले, आपको एक स्क्रिप्ट लिखनी होगी जो एलिमेंट की ID कैप्चर करे और उसका drawing context (जैसे 2d) डिक्लेयर करे, जो ब्राउज़र को उस पर पेंट करने के लिए ज़रूरी टूल्स और coordinate system के साथ तैयार करता है।
उदाहरण: The Drawing Context
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
const ctx = document.getElementById('myCanvas').getContext('2d');
</script>Rectangles ड्रॉ करना
2D canvas context सीधे आपके बोर्ड पर rectangles ड्रॉ करने के लिए तीन आसान methods देता है: fillRect (एक ठोस rectangle ड्रॉ करने के लिए), strokeRect (एक खोखली rectangular आउटलाइन ड्रॉ करने के लिए), और clearRect (किसी क्षेत्र को मिटाने के लिए)।
उदाहरण: Drawing Rectangles
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
const ctx = document.getElementById('myCanvas').getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 50);
</script>Lines और Paths ड्रॉ करना
कस्टम shapes, curves, या circles ड्रॉ करने के लिए, आपको path methods का उपयोग करना होगा। एक path ड्रॉ करना पेंसिल से ड्रॉइंग करने जैसा है: आप ब्राउज़र को बताते हैं कि पेंसिल को बोर्ड पर रखो (beginPath), लाइनों को ट्रेस करो (lineTo), और नतीजे को पेंट करो (stroke या fill)।
उदाहरण: Drawing Lines and Paths
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
const ctx = document.getElementById('myCanvas').getContext('2d');
ctx.beginPath();
ctx.lineTo(150, 80);
ctx.stroke();
</script>Canvas को Clear और Update करना
डायनामिक एनिमेशन, इंटरैक्टिव ड्रॉइंग बोर्ड, या गेम फ्रेम बनाने के लिए, आपको अपने canvas को बार-बार अपडेट करना होता है।
यह आप पूरे बोर्ड को clearRect से मिटाकर, अपने shape coordinates को अपडेट करके, और तेज़ी से नए फ्रेम पेंट करके करते हैं।
उदाहरण: Clearing and Updating the Canvas
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
const ctx = document.getElementById('myCanvas').getContext('2d');
ctx.clearRect(0, 0, 200, 100);
ctx.fillRect(10, 10, 50, 50);
</script>Canvas पर Text ड्रॉ करना
fillText और strokeText methods आपको टेक्स्ट को सीधे canvas पर ड्रॉ करने देते हैं, जिसमें font property पहले से साइज़ और typeface कंट्रोल करती है।
साधारण HTML टेक्स्ट के उलट, canvas टेक्स्ट सिर्फ pixels होता है — इसे सिलेक्ट, सर्च या screen readers द्वारा पढ़ा नहीं जा सकता।
उदाहरण: Drawing Text on Canvas
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
const ctx = document.getElementById('myCanvas').getContext('2d');
ctx.font = '20px Arial';
ctx.fillText('Hello Canvas', 10, 50);
</script>Canvas पर Images ड्रॉ करना
drawImage method आपको किसी मौजूदा image फाइल को canvas पर रखने देता है, और आप उसकी पोजीशन व साइज़ को कंट्रोल कर सकते हैं, या यहाँ तक कि उसे crop और scale भी कर सकते हैं।
यह ब्राउज़र में पूरी तरह image editors, filters, या डायनामिक thumbnail generators जैसी चीज़ें बनाने का आधार है।
उदाहरण: Drawing Images onto Canvas
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
const img = new Image();
img.src = 'photo.jpg';
img.onload = function () {
document.getElementById('myCanvas').getContext('2d').drawImage(img, 0, 0);
};
</script>Canvas को Image के रूप में Save करना
toDataURL method canvas पर मौजूदा समय में जो कुछ भी ड्रॉ है, उसे base64 data URL के रूप में एन्कोड की गई एक डाउनलोड करने योग्य image फाइल में बदल देता है। इसी तरह in-browser tools यूज़र को chart, ड्रॉइंग, या एडिट की गई फोटो को असली PNG या JPEG फाइल के रूप में एक्सपोर्ट करने देते हैं।
उदाहरण: Saving Canvas as an Image
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
const dataURL = document.getElementById('myCanvas').toDataURL('image/png');
</script>- canvas resolution को HTML attributes के बजाय CSS styles से define करना, जिससे आपकी drawings आकार से बाहर stretch हो सकती हैं।
- paths draw करते समय stroke या fill methods कॉल करना भूल जाना, जिससे आपके canvas पर invisible lines बनती हैं।
- context पूरी तरह load होने से पहले अपने scripts में canvas पर draw करने की कोशिश करना।
- canvas tag आपके webpage पर एक खाली, styleable drawing container define करता है।
- coordinate system तैयार करने के लिए अपने scripts में canvas ID capture करें और उसका 2D context declare करें।
- path methods से canvas पर rectangles, circles, और custom shapes draw करें, और clearRect और coordinate updates से smooth animations बनाएं।
standard HTML5 canvas और 2D contexts सभी modern web browsers द्वारा natively supported हैं।
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: