Canvas và SVG

Canvas vẽ pixel lên một bề mặt giống bitmap; SVG giữ từng shape thành DOM element. Canvas phù hợp scene dày và redraw liên tục, còn SVG phù hợp diagram co giãn và object tương tác riêng.

Nhìn nhanh

Câu hỏi	Câu trả lời thực tế
Dùng khi nào?	Animation hàng nghìn particle chuyển động hợp với Canvas; architecture diagram có box click được và label accessible hợp với SVG.
Cần làm gì?	Vẽ cùng một graphic ba shape bằng Canvas và inline SVG, sau đó resize và gắn click handler.
Biết là đúng bằng cách nào?	SVG vẫn sắc nét và từng shape xuất hiện trong DOM; Canvas cần redraw logic và accessibility riêng.
Lỗi hay gặp?	Đừng chọn chỉ theo file size—hãy xét tần suất update, số object, accessibility, styling và interaction.

flowchart LR
  A[Câu hỏi] --> B[Canvas và SVG]
  B --> C[Ví dụ nhỏ]
  C --> D[Bằng chứng]

Điểm quan trọng của sơ đồ là không dừng ở định nghĩa: hãy nối khái niệm với một ví dụ nhỏ và bằng chứng có thể quan sát.

Ví dụ đã phân tích

Animation hàng nghìn particle chuyển động hợp với Canvas; architecture diagram có box click được và label accessible hợp với SVG.

Trước khi làm, hãy viết dấu hiệu thành công. Sau đó chỉ thay đổi một yếu tố, quan sát kết quả và ghi lại assumption. Với Canvas và SVG, cách này giúp tách điều bạn biết khỏi điều bạn chỉ đang đoán.

Thực hành trong 20–30 phút

Mục tiêu: Vẽ cùng một graphic ba shape bằng Canvas và inline SVG, sau đó resize và gắn click handler.

1. Ghi lại trạng thái ban đầu và điều bạn dự đoán.
2. Thực hiện phiên bản nhỏ nhất, không thêm công cụ chưa cần thiết.
3. Thay đổi đúng một input hoặc constraint rồi chạy lại.
4. Lưu command, screenshot, output hoặc checklist làm bằng chứng.

Kết quả mong đợi: SVG vẫn sắc nét và từng shape xuất hiện trong DOM; Canvas cần redraw logic và accessibility riêng.

Sai ở đâu và sửa thế nào

Đừng chọn chỉ theo file size—hãy xét tần suất update, số object, accessibility, styling và interaction.

Khi kết quả khác dự đoán, đừng đổi nhiều thứ cùng lúc. Kiểm tra input, version, environment, quyền truy cập và log trước; sau đó lặp lại từ ví dụ nhỏ nhất.

Định nghĩa hoàn thành

• Tôi giải thích được khái niệm bằng ngôn ngữ của mình.
• Tôi đã hoàn thành ví dụ nhỏ và giữ bằng chứng.
• Tôi biết một failure mode và cách kiểm tra nó.
• Người khác có thể làm lại mà không phải đoán bước còn thiếu.

Đi sâu hơn

Mở resource hoặc repository đi kèm ở cuối trang khi bạn cần implementation đầy đủ. Hãy kiểm tra version hiện hành trước khi dùng command trong dự án thật.