1

I have an application where Konva is initially hidden (It's on the 2nd "tab" of a tab control on the page).

When the user clicks a "Save" button on this page, I'm trying to call Stage.toDataURL() to get the content in Konva. However, if the 2nd tab is never displayed, this always returns a blank image.

  • I've tried calling Stage.draw() before Stage.toDataURL(), but that didn't do it.
  • I've tried caching the Stage prior to calling Stage.toDataURL() also. No luck.
  • I don't have any images on the canvas, so it's not an issue of waiting for images to load.
  • Once the 2nd tab is displayed, even if the user then switches back to the 1st tab and re-hides Konva, it then works fine.

Is that a known limitation of Konva? That it won't render unless it's visible?

EDIT: Resolved

Some code was attempting to center and scale Konva within its container on page load. Since the container wasn't visible yet, its width and height were 0. This caused the code to set the Konva Stage width and height to negative numbers. Once I prevented that, it's able to export the image fine - even when hidden.

JWalden
  • 21
  • 3

1 Answers1

1

This is resolved. Some code was attempting to center and scale Konva within its container on page load. Since the container wasn't visible yet, its width and height were 0. This caused the code to set the Konva Stage width and height to negative numbers. Once I prevented that, it's able to export the image fine - even when hidden.

JWalden
  • 21
  • 3