CSS transform: scale(VALUE);

[Xaorn]

Bug reports:

Dom-Element transform: scale(VALUE) -> Font will not be scaled => 1 - overlapping letters in a generated Screenshot Before: After:

--> Short Solution for me Added new Option fontScale and included it into the createFontStyle prototype

CanvasRenderer( ... _this.canvas.fontScale = options.fontScale; ....

renderOptions = { ... fontScale: (_e =opts.fontScale) !== null && _e !== void 0 ? _e : 1
...

CanvasRenderer.prototype.createFontStyle = function (styles) { var fontVariant = styles.fontVariant .filter(function (variant) { return variant === 'normal' || variant === 'small-caps'; }) .join(''); var fontFamily = fixIOSSystemFonts(styles.fontFamily).join(', '); var fontSize = isDimensionToken(styles.fontSize) ? "" + styles.fontSize.number this.canvas.fontScale + styles.fontSize.unit : styles.fontSize.number this.canvas.fontScale + "px"; return [ [styles.fontStyle, fontVariant, styles.fontWeight, fontSize, fontFamily].join(' '), fontFamily, fontSize ]; };

Edit: Same scale missing in transform x & y (Array-element 4 & 5) (prototype.applyEffect -> effect.matrix[4] & effect.matrix[5]

Specifications:

• html2canvas version tested with: 1.4.1
• Browser & version: Chrome Version 99.0.4844.51 - 64bit
• Operating system: Windows 10

[JcGuerrero15]

CanvasRenderer( ... _this.canvas.fontScale = options.fontScale; ....

renderOptions = { ... fontScale: (_e =opts.fontScale) !== null && _e !== void 0 ? _e : 1 ...

CanvasRenderer.prototype.createFontStyle = function (styles) { var fontVariant = styles.fontVariant .filter(function (variant) { return variant === 'normal' || variant === 'small-caps'; }) .join(''); var fontFamily = fixIOSSystemFonts(styles.fontFamily).join(', '); var fontSize = isDimensionToken(styles.fontSize) ? "" + styles.fontSize.number this.canvas.fontScale + styles.fontSize.unit : styles.fontSize.number this.canvas.fontScale + "px"; return [ [styles.fontStyle, fontVariant, styles.fontWeight, fontSize, fontFamily].join(' '), fontFamily, fontSize ]; };

Can you share the code? Same problem here!

[Dams591]

Interested to know as well.

[Aggie123]

There's one solution, use setTimeout to delay the canvas paint, then it will be ok. Think it's the timing when paint, the font scale is not ready yet.