แก้ HTML5 Canvas Distorted (บิดเบี้ยว)

สาเหตุ: Canvas Width/Height ไม่ตรงกับ CSS Size

Default Canvas: width=300, height=150 (Ratio 2:1)

แก้: ตั้ง Width/Height Attribute ให้ตรงกับ CSS

<canvas id="mycanvas" width="400" height="300"></canvas>
<style>
#mycanvas { border: 1px solid red; width: 400px; height: 300px; }
</style>

JavaScript Dynamic Resize

var canvas = document.getElementById('mycanvas');
canvas.width = canvas.clientWidth * devicePixelRatio;
canvas.height = canvas.clientHeight * devicePixelRatio;
canvas.getContext('2d').scale(devicePixelRatio, devicePixelRatio);

Attribute width/height = Drawing Buffer Size (Pixels)
CSS width/height = Display Size
ทั้งคู่ต้องสัมพันธ์กัน (คูณ devicePixelRatio สำหรับ High-DPI)