如何在画布元素上绘制视频？

Question

I'm trying to use a canvas for two things in my application. First is to display a video on canvas (which I already did). After that, I need to draw squares over this video, and it's in that part that I've got some trouble. When I try to use one canvas over another, the video always stays on top of the squares I'm creating. If i use only one canvas the same thing happens. Can someone help me please?

Answer 1

With canvas it's all about order of operations, in your example you are drawing a video and want the sqaures on top, so you need to draw the squares AFTER you draw the video.

Simple example:

https://jsfiddle.net/a3z5hb45/

ctx.fillStyle = "red"
ctx.fillRect(x, y, 100, 100);

ctx.fillStyle = "blue"
ctx.fillRect(x + 50, y + 50, 100, 100);

Here you see that red goes under blue. Imagine that red is your video, so if you drew something after it will appear above.

If you reverse the order you get this:

https://jsfiddle.net/a3z5hb45/1/