เริ่มต้นใช้งาน canvas ใน 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 จะเก็บ วัตถุที่มีสิ่งที่เรียกว่า บริบทการแสดงผล การวาดภาพทั้งหมด จะเกิดขึ้นโดยใช้เมธอดของวัตถุนี้ ซึ่งเราจะศึกษาในบทเรียนถัดไป