Clash Royale CLAN TAG#URR8PPP

Possible to layer a KonvaJS Stage/canvas on top of another canvas?

Newbie question, maybe.

HTML:

<div id="myDiv">
<canvas id="myCanvas" style="display:inline; border: 1px solid #000000;"> </canvas>
</div>


What I want to do is place a KonvaJS Stage on top of (i.e. higher on the z-axis) myCanvas above.

myCanvas

If I use the default code:

var stage = new Konva.Stage(
container: 'myDiv',
width: window.innerWidth,
height: window.innerHeight
);


The Stage is placed inline after myCanvas.

myCanvas

Is there a way to tell Konva to layer its canvas?

1 Answer
1

You can add a container for the stage into your myDiv:

myDiv

<div id="myDiv">
<canvas id="myCanvas" style="display:inline; border: 1px solid #000000;"></canvas>
<div id="container"></div>
</div>


Then create a stage a place it on top of the absolute position.

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

const stage = new Konva.Stage(
container: 'container',
width: myCanvas.width,
height: myCanvas.height
);

stage.container().style.position = 'absolute';
stage.container().style.top = '0';
stage.container().style.left = '0';
// add z-index if you need it


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.