是否可以保持画布文本清晰和响应

Question

当我给出画布元素width: 100%时，即使尺寸非常小，它也会变得像素化。我尝试给画布本身一个很大的尺寸，但它什么都没改变。如何保持文字清晰？

http://jsfiddle.net/kpknhuoa/

Answer 1

设置画布标签的大小虽然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);