CanvasRenderingContext2D
APIs
drawImage
Chrome과 Firefox 출력 차이
Canvas 에서 이미지의 종횡비가 유지되지 않은 상태로 그려진다. 하지만 Firefox에서 종횡비가 유지되는데, 만약 Image 객체가 svg라면 preserveAspectRatio="none" 속성을 설정해야 한다.
filter
Polyfill
Polyfills CanvasRenderingContext2d.filter capability of adopting CSS3 filters to canvas contexts at least partially.
roundRect
Firefox Polyfill
Firefox에서 지원되지 않는 API 이므로 직접 폴리필을 구현하면 된다.
CanvasRenderingContext2D.prototype.roundRect = function (x, y, width, height, radius) {
if (width < 2 * radius) radius = width / 2;
if (height < 2 * radius) radius = height / 2;
this.beginPath();
this.moveTo(x + radius, y);
this.arcTo(x + width, y, x + width, y + height, radius);
this.arcTo(x + width, y + height, x, y + height, radius);
this.arcTo(x, y + height, x, y, radius);
this.arcTo(x, y, x + width, y, radius);
this.closePath();
return this;
}