Bắt đầu làm việc với canvas trong JavaScript

Canvas là một vùng vẽ đặc biệt trong trình duyệt bằng JavaScript. Vùng này được tạo ra bằng thẻ <canvas>, cần chỉ định chiều rộng và chiều cao cho nó:

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

Để làm việc với vùng này bằng JavaScript, trước tiên hãy lấy tham chiếu đến thẻ này vào một biến nào đó:

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

Sau đó, cần áp dụng phương thức getContext cho biến này:

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

Có thể đơn giản hóa:

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

Kết quả là, vào biến ctx sẽ được ghi một đối tượng chứa cái gọi là ngữ cảnh thực thi. Tất cả việc vẽ sẽ được thực hiện thông qua các phương thức của đối tượng này. Chúng ta sẽ nghiên cứu chúng trong các bài học tiếp theo.