是否可以保持畫布文本清晰和響應

Question

當我給畫布元素width: 100%時，即使在非常小的尺寸下它也會像素化。我試圖給畫布本身一個很大的尺寸，但它沒有改變。我如何保持文本清晰？

http://jsfiddle.net/kpknhuoa/

Answer 1

設置canvas標籤的尺寸雖然CSS是不是最好的方式做到這一點。
導致它通過您在css中指定的寬度和高度值的比率放大畫布的原始大小。

以下是如何將畫布寬度設置爲窗口大小。

var can = document.getElementById('overlay'), 
    ctx = can.getContext("2d"); 

//innerWidth and innerHeight values of the window are the screen size. 
can.width = window.innerWidth; 
can.height = window.innerHeight; 

ctx.font = "Bold 36px 'Helvetica'"; 
ctx.fillStyle = "black"; 
ctx.fillRect(0,0,1000,1000); 
ctx.globalCompositeOperation = 'destination-out'; 
ctx.fillText("Some Text", 25, 50);