1

I have a html that already has a canvas inside it and regular html elements around the canvas.

When I use html2canvas in the outer html, the inner canvas becomes blurred but not the outside elements.

I've tried disabling imageSmoothingEnabled on the canvas context and increasing scale on the html2canvas options to no avail.

const options = {
    scale : 2,
    allowTaint : true,
}

const outerDiv = document.getElementById('outerDiv');

html2canvas(outerDiv, options)
.then(canvas => {
    const ctx = canvas.getContext('2d');
    ctx.mozImageSmoothingEnabled = false;
    ctx.webkitImageSmoothingEnabled = false;
    ctx.msImageSmoothingEnabled = false;
    ctx.imageSmoothingEnabled = false;
    window.open(canvas.toDataURL("image/png", 1.0));
})

HTML out of context example : 

<div id="outerDiv">
  <h1>Crisp text!</h1>
  <canvas></canvas>
</div>

Note : In my actual context, this inner canvas is created using canvg library, which converts svg to canvas, but I think it's unrelated since the output from canvg isn't blurry.

Mojimi
  • 2,561
  • 9
  • 52
  • 116
  • `{scale : 2}`? Well, that sounds like a plausible cause for these symptoms. You could try doubling the size of your original canvas (directly from canvg) and to downscale it through CSS, but I'm not really sure it will do. Why do you need this scaling exactly? – Kaiido Mar 21 '19 at 14:32
  • @Kaiido well scale 1 doesn't change anything to be honest, I'm just trying to export a chart along with its top titles, really I am only using html2canvas to join the svg and the html title above – Mojimi Mar 21 '19 at 14:35
  • Can you provide an [MCVE]? – Kaiido Mar 21 '19 at 14:36
  • @Kaiido yeah I was hoping there was something obvious I was missing, it will take sometime to setup an actual example, I will try to do it later then, thanks. – Mojimi Mar 21 '19 at 14:41

0 Answers0