Tất cả trình duyệt web đều giới hạn kích thước tối đa của canvas (width, height, và tổng diện tích). Vượt quá giới hạn sẽ khiến canvas không vẽ được hoặc trả về canvas rỗng.
Giới hạn theo trình duyệt (Tham khảo)
| Trình duyệt | Max Width/Height (px) | Max Area (px²) |
|---|---|---|
| Google Chrome | 32,767 | 268,435,456 (≈ 256 MP) |
| Firefox | 32,767 | 472,907,776 (≈ 451 MP) |
| Safari (macOS/iOS) | 32,767 (macOS), 16,384 (iOS) | ~268 MP (macOS), ~67 MP (iOS) |
| Edge (Chromium) | 32,767 | 268,435,456 |
| IE 11 | 8,192 | Không công bố chính xác |
| IE Mobile | 4,096 | Không công bố chính xác |
Lưu ý quan trọng
- Giới hạn diện tích (width × height) thường quan trọng hơn width/height riêng lẻ.
- Trên mobile, giới hạn thường thấp hơn do bộ nhớ GPU hạn chế.
- Giới hạn có thể thay đổi giữa các phiên bản trình duyệt.
- Thiết bị RAM thấp có thể gặp giới hạn thực tế thấp hơn spec.
Cách kiểm tra giới hạn thực tế (Runtime)
function getMaxCanvasSize() {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
if (!ctx) return { width: 0, height: 0, area: 0 };
// Binary search tìm max width/height
var maxSide = 32767;
var step = 1024;
// ... logic test thực tế ...
return { width: maxW, height: maxH, area: maxW * maxH };
}
Xử lý khi cần canvas lớn
- Chia nhỏ thành nhiều canvas (tiling).
- Sử dụng
OffscreenCanvas(Web Worker) nếu hỗ trợ. - Render theo tile và ghép ảnh phía server.
- Giảm độ phân giải / dùng vector (SVG) cho hình vẽ đơn giản.