CODEWITHSUNDEEP
javascripthtmlcanvaswebdraw
Pedro Frattezi Silva
Pedro Frattezi Silva

Reputation: 581

How to draw over video on a canvas element?

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?

Upvotes: 2

Views: 1117

Answers (1)

Drew Dahlman
Drew Dahlman

Reputation: 4972

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/

Upvotes: 3

Related Questions