• Hình ảnh (tĩnh hoặc động)
• Các sơ đồ đơn giản
• Biểu đồ và đồ thị

• Hầu hết các trình duyệt với các phiên bản mới đều hỗ trợ tốt cho Canvas (màu xanh lá),
• Các phiên bản cũ của Firefox, Safari, Android Browser và toàn bộ các phiên bản của Opera Mini thì hỗ trợ một phần (tức là sẽ có chức năng có thể hoạt động nhưng chức năng khác lại không)
• Duy nhất chỉ có IE phiên bản 6-8 là không hỗ trợ nhưng chắc các bạn cũng không cần quan tâm đâu vì Microsoft cũng đã tuyên bố sẽ khai tử IE rồi.

Cũng giống như những thẻ HTML khác thì bạn sẽ cần khai báo thẻ Canvas trên trang web của bạn:

<canvas id="canvasId" width="xxx" height="yyy"> <!-- có thể sử dụng style="" như các thẻ HTML bình thường khác-->
<!-- giống như thẻ <img>/<video> ... có 1 fallback content khi gặp lỗi không thể hiện thị được, 
thì bạn cũng có thể đặt fallback content bên trong thẻ canvas  như thế này nếu như trình duyệt web không hỗ trợ.
cái này chỉ để đề phòng thôi vì như bạn thấy ở trên, hầu hết các trình duyệt đều hỗ trợ `Canvas` hết rồi
-->
</canvas>

Tiếp theo, phần cốt lõi của Canvas chính là phần xử lý javascript:

<script type="text/javascript">
    var canvas = document.getElementById('canvasId'), //tìm kiếm thẻ canvas thông qua Id
    ctx = canvas.getContext(contextType, contextAttributes); //hàm canvas.getContext() sẽ được nói rõ hơn ở phía dưới.
</script>

Như bạn có thể thấy thì hàm getContext bao gồm 2 thành phần:

• contextType: là 1 trong 4 giá trị sau:
  • 2d: tạo ra các hình ảnh 2D (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)
  • webgl: tạo ra các hình ảnh 2D hoặc 3D, chỉ phù hợp với các trình duyệt hỗ trợ WebGL phiên bản 1.
  • webgl2: tương tự như cái trên nhưng yêu cầu trình duyệt phải hỗ trợ WebGL phiên bản 2.
  • bitmaprenderer: cung cấp một ImageBitmap để thay thế nội dung của canvas.
• contextAttributes: là các thuộc tính tương ứng với mỗi loại contentType, ví dụ:
  • 2d: alpha, desynchronized
  • WebGL: alpha, desynchronized, depth, ...

=> trong phạm vi bài viết này thì chúng ta sẽ làm việc với contextType là 2d nhé, và chúng ta sẽ làm việc với một lưới tọa độ xOy như hình bên dưới, nó không giống với hệ tọa độ mà chúng ta vẫn thường dùng vì gốc tọa độ nằm ở góc trên bên trái

Và tất nhiên rồi, thức toán học 12 năm phổ thông + mấy năm đại học sẽ có đất dụng võ ở đây. Bắt đầu với một số hàm cơ bản nào:

• Để vẽ hình:
  • fillStyle: chọn màu để tô (có thể dùng mã màu rgb() hoặc dùng tên màu đều được nhé)
  • fillRect(x, y, width, height): vẽ hình chữ nhật.
  • moveTo(x,y): di chuyển bút (vị trí bắt đầu vẽ) đến tọa độ (x,y)
  • lineTo(): vẽ 1 đường thẳng từ vị trí đặt bút hiện tại đến tọa độ (x,y)
  • arc(x,y,radius, startAngle, endAngle, counterclockwise): vẽ một vòng cung với tâm là (x,y), bán kính là radius, góc bắt đầu, góc kết thúc và chiều vẽ là người chiều kim đồng hồ hay không (true/false)
  • beginPath(): bắt đầu vẽ
  • closePath(): kết thúc vẽ ()
  • stroke(): hiển thị đường đã vẽ với màu mặc định là màu đen (Không tô màu phần bên trong hình)
  • fill(): cũng là để vẽ nhưng dùng fill thì sẽ tô hết cả vùng được vẽ
• Để viết chữ:
  • font: khai báo font chữ
  • strokeText(text, x, y): viết chữ bắt đầu từ tọa độ (x,y) (không tô màu chữ)
  • fillText(text, x, y): viết chữ bắt đầu từ tọa độ (x,y)
• Để vẽ hình:
  • drawImage(img, x, y): vẽ hình bắt đầu từ tọa độ (x,y)

Nào, bây giờ hãy thử dùng những hàm được liệt kê ở trên để vẽ một cái gì đấy đơn giản nhé, chắc dễ nhất là vẽ quốc kỳ:

• Quốc kỳ Ý này (nó chỉ gồm 3 hình chữ nhật đứng cạnh nhau thôi)

• Nêu muốn luyện tập thêm cho quen tay, các bạn có thể tự thử thách bản thân với những quốc kỳ khác phức tạp hơn, ví dụ như là cờ Mỹ chẳng hạn (nghĩ cảnh vẽ 50 ngôi sao đã nản rồi ).

Đó là những thao tác vẽ vời cực kỳ đơn giản với canvas, sau khi đã thành thạo rồi và muốn thử làm cái gì đấy "người lớn" hơn thì có thể xem 3 bài viết mình liệt kê ở phần tổng kết để biết Canvas có thể làm được nhiều thứ như thế nào nhé!

• Hiệu ứng rơi rơi như thế này
• Mấy cái chấm bay bay nối với nhau như thế này .
• Làm game "đơn giản" như thế này