kineticjs canvas overlapping another canvas

Question

I'm attempting to build an application that uses KineticJS to overlap another element. Ideally the background application could be simply another div with a photo in it or something as complex as Google Maps.

What I'm trying to accomplish is a proof of concept where I could basically have a KineticJS canvas that overlaps another element and allows it to overlap the other element but have all input go directly to the KineticJS object only.

Any thoughts?

score 0 · Accepted Answer · answered Dec 09 '13 at 19:09

HTML:

<div id="wrapper">
    <canvas id="canvasBottom" width=300 height=200></canvas>
    <div id="container" width=300 height=200></canvas>
</div>

CSS to put the Kinetic container div directly on to of a canvas element

#wrapper{
    position:relative;
    width:300px;
    height:200px;
}
#canvasBottom, #container{
    position:absolute; top:0px; left:0px;
    width:100%;
    height:100%;
}

JS to use the container div

var stage = new Kinetic.Stage({
    container: 'container',
    width: 300,
    height: 200
});

kineticjs canvas overlapping another canvas

1 Answers1