Canvas Antialiasing 선명도 높이기

다음은 캔버스를 그리는 코드의 일부이다.

const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`;
const context = canvas.getContext("2d");

// .....중략

 

위의 코드를 이용하여 아래 이미지와 같이 특정 지역의 대기오염도를 캔버스로 구현하였다.

글자가 흐릿하게 보이는 현상을 해결하기 위해서는 Antialiasing  처리를 해주어야 하는데 구현은 간단하다.

 

아래 코드와 같이 canvas의 크기를 조절하고 context의 스케일을 조절하면 된다.

const canvas = document.createElement('canvas');
canvas.width = width * 2;
canvas.height = height * 2;
canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`;
const context = canvas.getContext("2d");
context.scale(2, 2)

// .....중략

 

 

아래 이미지는 업스케일 된 결과물이다.

크기와 스케일을 두배씩 증가시켜 선명도를 증가시켰다.