HTML5边框锐化,在HTML5画布中锐化绘制

今天我开始学习如何通过做一个基本的加载圈动画来使用画布。一切都在小res(约100×100像素)下完美无缺，但是当我尝试更大的时候，它们都变得扭曲和模糊，看起来非常糟糕。所以这是我的问题：我可以以某种方式打开一些抗锯齿或以某种方式使其更锐化？我已经找到了大量的锐化算法，但对于图像，我不确定它是否适用于此。

圆形加载示例:(代码不完美甚至完成，因为我仍然坚持这种模糊)

var c = document.getElementById("canvas");

var ctx = c.getContext("2d");

var int_count = 0;

var circ_angle = 1.5;

var count = 10;

var interval = setInterval(function() {

if (int_count == count) {

clearInterval(interval);

}

ctx.clearRect(0, 0, 1000, 1000);

ctx.beginPath();

ctx.arc(100, 70, 50, 1.5 * Math.PI, -1 * Math.PI, true);

ctx.lineWidth = 1;

ctx.strokeStyle = "#717171";

ctx.stroke();

ctx.beginPath();

//1.5 = 0%; 1 = 1/4; 0.5 = 2/4; 0 = 3/4 -1 = full

ctx.font = "40px sarpanch";

ctx.arc(100, 70, 50, 1.5 * Math.PI, circ_angle * Math.PI, true);

//color

if (int_count >= 5 && int_count < 10) {

ctx.strokeStyle = "#ff8000";

}

else if (int_count >= 9) {

ctx.strokeStyle = "#F00";

}

else {

ctx.strokeStyle = "#3a9fbe";

}

ctx.fillText("" + int_count + "", 88, 83);

ctx.lineWidth = 3;

ctx.stroke();

int_count += 1;

circ_angle += (-0.2);

}, 500);