แก้ปัญหา HTML5 Canvas วาดเส้นแล้วเบลอ (Blurry)

สาเหตุ: Sub-pixel Rendering

เมื่อวาดเส้นตรงบนพิกเซลเต็ม ตำแหน่ง 0.5 จะทำให้เส้นคมที่สุด

วิธีแก้

1. ปรับตำแหน่งเป็น .5

   context.moveTo(20.5, 0);
   context.lineTo(20.5, 50);

2. ตั้งขนาด Canvas ให้ตรงกับ CSS

   var canvas = document.getElementById('canvas');
   canvas.width = 250;  // ความกว้างจริง (pixels)
   canvas.height = 250; // ความสูงจริง
   canvas.style.width = "250px";  // CSS size
   canvas.style.height = "250px";

หาก CSS size ต่างจาก width/height attribute จะเกิด scaling ทำให้เบลอ