CanvasRenderingContext2D
lastmod 2023-02-27created 2023-02-216 edits
APIs
drawImage
Output differences between Chrome and Firefox
On a Canvas, images are drawn without preserving their aspect ratio. Firefox, however, preserves the aspect ratio, so if the Image object is an svg, you need to set the preserveAspectRatio="none" attribute.
filter
Polyfill
Polyfills CanvasRenderingContext2d.filter capability of adopting CSS3 filters to canvas contexts at least partially.
roundRect
Firefox Polyfill
This API is not supported in Firefox, so you can implement a polyfill yourself.
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;
}