關於Canvas的大小

關於Canvas的大小

前言

  Canvas的大小可以在MDN的Canvas 基本用途裡找到說明，但說明有點簡短，所以我就研究了一下，在此做個紀錄。

內容

  Canvas有兩種大小?是的，一個大小是繪製空間(Draw space)的大小另一個是顯示空間(Present space)的大小。繪製空間所代表的是畫布的空間，如CanvasRenderingContext2D.fillRect()、CanvasRenderingContext2D.fillText()與CanvasRenderingContext2D.drawImage()都是使用這個空間定址，顯示空間所表的是最後呈現在螢幕的大小，這兩個空間的關係是瀏覽器會將繪製空間縮放到顯示空間呈現在螢幕上，如下圖

繪製空間與顯示空間

圖中可以看到繪製空間的大小是用"canvas.width"與"canvas.height"來表達，具體的控制如下

let canvas=document.getElementById('myCanvas');
let ctx=canvas.getContext('2d');
ctx.canvas.width=300;
ctx.canvas.height=300;

這樣就可以控制繪製空間的大小。圖中的顯示空間的大小用"canvas.style.width"與"canvas.style.height"來表達，具體的控制如下

let canvas=document.getElementById('myCanvas');
let ctx=canvas.getContext('2d');
ctx.canvas.style.width='300px';
ctx.canvas.style.height='300px';

控制的方法其實就是控制CSS的屬性。如果要取得顯示空間的大小可以透過CSS取得，但畢竟該變數是字串不能直接變成"Number"，所以要取得顯示空間大小可以透過"canvas.clientWidth"與"canvas.clientHeight"來取得，取得的範例如下

let canvas=document.getElementById('myCanvas');
let ctx=canvas.getContext('2d');
ctx.canvas.style.width='300px';
ctx.canvas.style.height='300px';
console.log('present space width:'+ctx.canvas.clientWidth);
console.log('present space height:'+ctx.canvas.clientHeight);

要注意的是這兩個數值只能"get"不能"set"。

參考資料

Canvas 基本用途