Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more /t5/animate-discussions/how-to-put-animation-over-video-in-html5-canvas/m-p/8946073#M164937 Oct 02, 2017 Oct 02, 2017

This worked great and was the last key to doing what I wanted once I figured out what it was doing. Thanks!

The z-index: style is the key. You don't even need to use JS to attach the canvas to a div if you're using CSS to make them overlap. I did this using Flask, so the {{width}} and {{height}} are jinja that's being replaced by variables from python code.

    <div id="div_outer" class="outerImageContainer" style="width:{{width}}px;height:{{height}}px;">
    <div id="div_inner" class="innerImageContainer">
        <canvas id="can" class="coveringCanvas" style="z-index: 999;" width="{{width}}px" height="{{height}}px" ></canvas>
        <video id="vid" onplaying="startDrawing()" onsuspend="stopDrawing()"
               src="/static/myvideo.mp4" controls="true" type="video/mp4" class="coveredImage"></video>
    </div>
    </div>

Then the CSS that makes canvas and video overlap the same area.

.outerImageContainer
{ margin: 20px;}
.innerImageContainer
{ width: 100%; height: 100%; position: relative; }
.coveredImage
{ width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;}
.coveringCanvas
{ width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; pointer-events: none;}

Finally I have this to draw the animations in canvas

function draw() {
    var time = vid.currentTime;
    if(time !== lastTime) {
        var c=document.getElementById("can");
        var ctx=c.getContext("2d");
        //no reason to redraw image but you can. it will overlap video controls:
          //ctx.drawImage(vid,0,0,{{width}}, {{height}}, 0,0,{{width}}, {{height}});
         //draw stuff here on top of the video each frame
        lastTime = time;
    }
    requestAnimationFrame(draw);
}
function startDrawing() {
    draw();
}