JavaScript ဖြင့် canvas အသုံးပြုခြင်းစတင်ခြင်း

Canvas သည် JavaScript ကိုအသုံးပြု၍ browser အတွင်းရှိ အထူးပုံဆွဲနယ်ပယ်တစ်ခုဖြစ်ပါသည်။ ဤနယ်ပယ်ကို <canvas> tag ကိုအသုံးပြု၍ ပြုလုပ်ပြီး အနံနှင့် အမြင့်ကို သတ်မှတ်ပေးရပါမည်။

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

ဤနယ်ပယ်ကို JavaScript ဖြင့် အသုံးပြုရန် အဆင့်ပထမအနေဖြင့် ၎င်း tag ကို variable တစ်ခုအတွင်းသို့ ရယူပါမည်။

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

ထို့နောက် ၎င်း variable သို့ getContext method ကို အသုံးပြုရပါမည်။

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

အောက်ပါအတိုင်း ရိုးရှင်းအောင် ပြုလုပ်နိုင်ပါသည်။

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

ရလဒ်အနေဖြင့် ctx variable အတွင်းတွင် execution context ဟုခေါ်သော object တစ်ခု ရေးသွင်းပါလိမ့်မည်။ ပုံဆွဲခြင်း အားလုံးသည် ၎င်း object ၏ methods များကို အသုံးပြု၍ ဖြစ်ပေါ်လာမည်ဖြစ်ပြီး ၎င်းတို့ကို နောက်လာမည့်သင်ခန်းစာများတွင် ကျွန်ုပ်တို့ လေ့လာသွားပါမည်။