CANVAS에 그린 도형과 이미지가 흐릿하게 보일 때

맥북 레티나 디스플레이, 또는 모바일에서 확인 할 경우 canvas에 그린 도형과 이미지가 아래와 같이 흐릿하게 보이는 경우가 있다.

레티나 디스플레이나 모바일로 보는 경우 위의 ‘Ratio비적용‘과 ‘Ratio적용‘ 버튼을 눌렀을 때 원의 테두리가 흐릿하거나 또렷해지는 것을 확인 할 수가 있다. 고해상도 디스플레이에서 캔버스를 사용할 때 몇 가지 설정해주어야 하는 부분이 있는데 이 부분에 대해서 정리가 되어 있는 페이지가 있어서 가지고 와보았다.

http://www.html5rocks.com/en/tutorials/canvas/hidpi/?redirect_from_locale=ko

전체코드

var wWidth, wHeight;
var canvas, ctx;
var devicePixelRatio, backingStoreRatio, ratio;

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
wWidth = $(window).width();
wHeight = $(window).height();

(devicePixelRatio = window.devicePixelRatio || 1),
  (backingStoreRatio =
    ctx.webkitBackingStorePixelRatio ||
    ctx.mozBackingStorePixelRatio ||
    ctx.msBackingStorePixelRatio ||
    ctx.oBackingStorePixelRatio ||
    ctx.backingStorePixelRatio ||
    1),
  (ratio = devicePixelRatio / backingStoreRatio);

// style의 width, height 지정
canvas.style.width = wWidth + "px";
canvas.style.height = wHeight + "px";

// attribute에 ratio 값을 곱한 width, height 지정
canvas.width = wWidth * ratio;
canvas.height = wHeight * ratio;

// context scale 지정
ctx.scale(ratio, ratio);

// 원 그리는 부분
ctx.fillStyle = "#666";
var _radius = Math.floor(Math.min(wWidth, wHeight) * 0.4);
ctx.arc(wWidth / 2, wHeight / 2, _radius, 0, 2 * Math.PI);
ctx.fill();

console.log(devicePixelRatio, backingStoreRatio, ratio);

1. 일단 변수 3개를 만들어서 최종적으로는 ratio 값을 도출한다.

devicePixelRatio, backingStoreRatio, ratio;

(devicePixelRatio = window.devicePixelRatio || 1),
  (backingStoreRatio =
    ctx.webkitBackingStorePixelRatio ||
    ctx.mozBackingStorePixelRatio ||
    ctx.msBackingStorePixelRatio ||
    ctx.oBackingStorePixelRatio ||
    ctx.backingStorePixelRatio ||
    1),
  (ratio = devicePixelRatio / backingStoreRatio);

2. canvas의 style에 width, height를 지정하고

canvas.style.width = wWidth + "px";
canvas.style.height = wHeight + "px";

3. canvas의 attribute에 ratio 값을 곱한 width, height를 지정한다.

canvas.width = wWidth * ratio;
canvas.height = wHeight * ratio;

4. 마지막으로 canvas context에 ratio만큼의 scale을 지정한다.

ctx.scale(ratio, ratio);