javascript - How to draw freely in a canvas in html 5 which is overlay above video?

I have a video element and canvas element. The styles are in the following way:

canvas {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;

  right: 0;
  height:100%;
  width:100%;
  background-color: rgba(0,0,255,0.5);
  z-index:10;
}
video {
  position: absolute;
  top: 0;
  left: 0;

}

The HTML is as follows

I am trying to draw in the canvas over the video element. When I set the position of canvas to fixed, I can draw in canvas with below code, but canvas is not overlayed in the video. But when I set position to absolute, the canvas is overlayed in the video but I can't draw in the video. I checked my console for the points of context.moveTo() and context.lineTo() and they are showing perfectly but are not drawn in the canvas. Please help.

//canvas
var canvas = document.getElementById('c1');
var context= canvas.getContext('2d');
var localVideo = document.getElementById('local-video')
localVideo.addEventListener( "loadedmetadata", function (e) {
var width = this.videoWidth,
height = this.videoHeight;
canvas.height = height;
canvas.width = width;
}, false );

  $('#c1').mousedown(function(e){
  var mouseX = e.pageX - this.offsetLeft;
  var mouseY = e.pageY - this.offsetTop;
  paint = true;
  addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop,false);
  redraw();
  });

  $('#c1').mousemove(function(e){

    if(paint){
      addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
      redraw();
    }
  });

  $('#c1').mouseup(function(e){
    paint = false;
  });


  $('#c1').mouseleave(function(e){
    paint = false;
  });

var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;

function addClick(x, y, dragging)

{
  clickX.push(x);
  clickY.push(y);
  clickDrag.push(dragging);
}

function redraw(){
  context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas

  context.strokeStyle = "rgba(0,0,255,0)";

  context.lineJoin = "round";
  context.lineWidth = 5;

  for(var i=0; i < clickX.length; i++) {
    context.beginPath();
    if(clickDrag[i] && i){
      context.moveTo(clickX[i-1], clickY[i-1]);
     }else{
       context.moveTo(clickX[i]-1, clickY[i]);
     }

     context.lineTo(clickX[i], clickY[i]);

     context.stroke();
     context.closePath();
  }
}