Một trong những yêu cầu thường thấy của game là thay đổi kích thước cửa cửa sổ game theo trình duyệt. Việc thay đổi này cần đảm bảo tốc độ của game không bị ảnh hưởng cũng như hình ảnh khơng bị biến dạng (giữ nguyên tỉ lệ chiều cao vào rộng).
Một trong những lợi thế của các trình duyệt hiện đại là hỗ trợ tính nănghardware accelerated cho canvas. Với cùng một pixel, trình duyệt có thể hiển thị canvas ở nhiều kích thước khác nhau. Ví dụ như bạn gán canvas.width = 200 và canvas.height = 100, như vậy canvas có tất cả 20000 pixel. Và bạn có thể tăng gấp đơi kích thước của canvas lên nhưng lượng pixel mà bạn thao tác với canvas vẫn chỉ là 20000. Hay nói cách khác, việc xử lý và vẽ canvas với các kích thước khác nhau đã được bộ xử lý đồ họa (GPU) thực thi một cách tự động.
Ta phân biệt kích thước thực và kích thước hiển thị của canvas. Kích thước thực của canvas được gán thơng qua hai thuộc tính là width và height:
canvas.width = 200; canvas.height = 100;
Kích thước hiển thị của canvas được xác định thuộc tính style.width và style.height (bằng
javascript hoặc CSS):
canvas.style.width = “400px”; canvas.style.height = “200px”;
Độ nét của canvas phụ thuộc vào kích thước thực của nó, vì vậy hãy giữ một tỉ lệ vừa phải giữa hai loại kích thước này.
1. Điều chỉnh canvas thao kích thước trình duyệt
Một ví dụ đơn giản để bạn áp dụng khi cần thiết. Không chỉ cho canvas, bạn có thể sử dụng cách này để hiển thị hình ảnh, video,… (như xem ảnh slideshow).
81 | P a g e
function fitSize(canvas){
82 | P a g e
var width = window.innerWidth-5; var height = window.innerHeight-5;
if(width/height>ratio) width = height*ratio; else height = width/ratio; canvas.style.width = width; canvas.style.height = height; canvas.style.top = (window.innerHeight-height)/2; canvas.style.left = (window.innerWidth-width)/2; }