Question

I am continuously drawing some lines in my canvas using kinetic.js and I want a div-text to appear on top of this canvas. Using relative and absolute trick I can place a div in the middle of my canvas but the problem is as I am continuously drawing lines, these lines are being drawn on top of my div-texts which I dont want to happen!

Basic template:

    <div id="div-text" style="background-color:#00baba; position: absolute; margin-top: 50%; margin-left: 50%;">
        greatTexts
   </div>

   <div id="container" style="position: relative; width: 100%; height: 100%;">
   <canvas></canvas> 
   </div>

Answer 1

I believe you could also just set a z-index value on both #container and #div-text.
Like this:

<div id="div-text" style="background-color:#00baba; position: absolute; margin-top: 50%; margin-left: 50%;z-index:999;">
        greatTexts
   </div>

  <div id="container" style="position: relative; width: 100%; height: 100%;z-index:990;">
     <canvas id="myCanvas" height="500" width="500"></canvas> 
   </div>

This shows an example.