JavaScript में canvas के साथ काम शुरू करना

कैनवास ब्राउज़र में JavaScript पर ड्राइंग के लिए एक विशेष क्षेत्र है। यह क्षेत्र टैग <canvas> की मदद से बनाया जाता है, जिसके लिए चौड़ाई और ऊंचाई निर्दिष्ट करनी चाहिए:

html<canvas width="200" height="200"></canvas>

JavaScript पर इस क्षेत्र के साथ काम करने के लिए सबसे पहले किसी वेरिएबल में इस टैग का संदर्भ प्राप्त करें:

javascriptlet canvas = document.querySelector('canvas');

फिर इस वेरिएबल पर मेथड getContext लागू करना आवश्यक है:

javascriptlet canvas = document.querySelector('canvas');
let ctx    = canvas.getContext('2d');

इसे सरल बनाया जा सकता है:

javascriptlet ctx = document.querySelector('canvas').getContext('2d');

परिणामस्वरूप वेरिएबल ctx में एक ऑब्जेक्ट लिखा जाएगा जिसमें तथाकथित एक्जिक्यूशन कॉन्टेक्स्ट शामिल होता है। सारी ड्राइंग इस ऑब्जेक्ट की मेथड्स की मदद से होगी। हम अगले पाठों में इनके अध्ययन में लगेंगे।