CodePen

HTML

            
               <div id="firstshape">
   <div id="background" style="width:100px;height:100px; z-index:-1;">
     <canvas id="myCanvas" style="width:100px; height:100px; border:1px solid #000000;"></canvas>
  </div>
  <div id="foreground"></div>
</div>
            
          
!

CSS

            
              canvas {background-color:blue; }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,10);
ctx.lineTo(80,20);
ctx.lineTo(80,90);
ctx.lineTo(10,90);
ctx.lineTo(20,10);
ctx.strokeStyle="yellow";
ctx.stroke();
ctx.fillStyle="yellow";
ctx.fill();

$("#foreground").html('i want to put html elements on top of the background');
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................