text-shadow blur-radius doesn't match scale.

[CNOliverZhang]

Please make sure you are testing with the latest release of html2canvas.
Old versions are not supported and issues reported for them will be closed.

Please follow the general troubleshooting steps first:

• You are using the latest version
• You are testing using the non-minified version of html2canvas and checked any potential issues reported in the console

Bug reports:

I' m using the latest version and the bug is confirmed on Chromium, while other browsers were not tested.

When scale is set, and the element to be rendered into the canvas contains texts which has text-shadow with blur, the blur-radius doesn't scale with the element.

Sample of the bug:

appearance in the web page

captured image

If you look carefully you can find shadow blur but it dosen' t appeare as its expected size.

sample code

let watermark = document.getElementById('watermark')
  html2canvas(document.getElementById('watermark-container'), {
  scale: scale,
  backgroundColor: null
}).then(canvas => {

Sample of my fixture

I scaled the blur of the text-shadow manually and the captured image appeared as I expected.

captured image

sample code

let watermark = document.getElementById('watermark')
let shadow = watermark.style['text-shadow'].split(' ')
//scaling the shadow blur manually 
shadow[shadow.length - 1] = shadow[shadow.length - 1].slice(0, -2) * scale + 'px'
watermark.style['text-shadow'] = shadow.join(' ')
//finished scaling
html2canvas(document.getElementById('watermark-container'), {
  scale: scale,
  backgroundColor: null
}).then(canvas => {

Specifications:

• html2canvas version tested with: 1.0.0.rc5
• Browser & version: Chromium (Electron built-in, the latest version)
• Operating system: Windows 10

[batiste]

I have the same issue.