How to put animation on top and behind the video in HTML5 Canvas?

Hi.

You can actually use a bitmap to display the video as a regular CreateJS object.

Try it:

https://bit.ly/3q8KbtI

JavaScript / JS Code:

function onDrawEnd()
{
	var video = document.getElementById("yourVideoID"); // the id is set in the Properties panel
	var bitmap = new createjs.Bitmap(video);
	
	this.stop(); // this is important if your timeline has only one frame. Otherwise changing indexes may not work properly
	video.style.opacity = 0; // a workaround for hiding the video. Not sure if this is the best approach
	bitmap.scale = 360 / 1080; // scaled video width on the IDE / original video width
	bitmap.x = 90
	bitmap.y = 90;
	this.addChildAt(bitmap, 1); // adds the child at the desired index
}

stage.on("drawend", onDrawEnd, this, true);

Source / download / files / FLA:

https://bit.ly/3CK3OO1

This is the easiest part.

The hardest part is to handle mouse/pointer events... Please let us know if you find a solution or if you struggle doing this.

I hope it helps.

Regards,

JC

If you're asking if it's possible to have the canvas element be simultaneously above and below the video element, then... no.

if you want to move something in front of the stage, try to add an object on the stage on the position you want in a delay, after the component is loaded and played.

root = this;
var object1 = new lib.obj1(); // named object from library
function place1() {
	root.addChild(object1);
	object1.x = 190;
	object1.y = 150;
}
setTimeout(function(){ place1(); }, 3000);