title: How to draw freely in a canvas in html 5 which is overlay above video?
body: <p>I have a video element and canvas element. The styles are in the following way:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>The HTML is as follows</p>
  
  <pre><code>&lt;video id="local-video" class="ui large image hidden" autoplay&gt;&lt;/video&gt;
        &lt;canvas id="c1" class="ui large"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>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 );</p>
  
  <pre><code>  $('#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 &lt; clickX.length; i++) {
      context.beginPath();
      if(clickDrag[i] &amp;&amp; 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();
    }
  }
  </code></pre>