vue-konva pass custom style to div.konvajs-content & canvas - konvajs

Question

<v-stage :config="{width:750,height:750}">
<v-layer>
</v-layer>
</v-stage>
will render
<div>
<div
class="konvajs-content"
role="presentation"
style="position: relative; user-select: none; width: 750px; height: 750px;"
>
<canvas
width="750"
height="750"
style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 750px; height: 750px; display: block;"
></canvas>
</div>
</div>
but I want to make it render
<div>
<div
class="konvajs-content"
role="presentation"
style="position: relative; user-select: none; width: 100vw; height: 100vw;"
>
<canvas
width="750"
height="750"
style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: block;"
></canvas>
</div>
</div>
keeping the canvas.width(attribute) stay in 750, but change div.konvajs-content.style.width to 100vw, and canvas.style.width to 100%
=== update ===
Why I need this ?
I'm creating an image editor, and the users may save the image exported from the cavnas, I want the canvas be responsive in layout, but I also have to make the image exported from the canvas have the same width, 750 in my case.
This is something like what a html5 game engine with scale manager would do.

Answer 1

Konva doesn't work well in the case when you change the CSS styles (like width and height) of a stage or canvases.
If you want to make it responsive behavior you can do it differently. Just place a stage into the div container with required size (configured with styles). Then set the stage size to the size of the container.
// your desired "virtual" width of the stage
var stageWidth = 750;
var container = document.querySelector('#stage-parent');
// now we need to fit stage into the container
var containerWidth = container.offsetWidth;
// also we can scale the stage
var scale = containerWidth / stageWidth;
stage.width(containerWidth);
stage.scale({ x: scale, y: scale });
stage.draw();
Take a look into this demo: https://konvajs.org/docs/sandbox/Responsive_Canvas.html