Z-index

stacking canvas on image

HTML

<img src="http://writingfix.com/images/for_kids/crazy_monkey.jpg" id="myImage">
  <canvas id="myCanvas"></canvas>

CSS

#myImage {
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
}
#myCanvas {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid black;
}

JavaScript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var theImage = document.getElementById("myImage");
c.width = theImage.width;
c.height = theImage.height;

ctx.fillStyle="red";
ctx.font="20pt Arial"
ctx.fillText("Z-index is the sh*t",100,200);