[HTML] HTML Canvas 태그

오늘은 Canvas 사용 중 자간이 안먹히는 현상이 있어서 수정하였다.

 

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

canvas.style.letterSpacing = test.letterSpacing + "px";

var ctx = canvas.getContext('2d');

ctx.fillStyle = "rgb(200,0,0)";

ctx.font = "bold 20pt";

ctx.filText("test", 5, 20);

 

대충 위와 같이 되어있었다.

 

canvas가 아닌 ctx 요소에 자간을 줘야하는데 canvas에 자간을 설정하여 적용되지 않았던 것.

 

ctx.letterSpacing = test.letterSpacing + "px"; 

 

해당 코드로 변경하여 수정됨.

 

하지만 타입스크립트에서 ctx는 CanvasRenderingContext2D에 미존재하는 필드라는 오류가 발생.

확인해보니 canvas.getContext("2d"); 의 반환 타입이 CanvasRenderingContext2D 이고, 해당 필드에 letterSpacing 필드가 없다.

 

var ctx: any = canvas.getContext("2d"); 

로 수정하여 해결. 

 

오늘은 canvas를 사용하여 자간을 설정하는 방법을 알아보았다.