I want to draw (using html5 canvas) inside video in react

It’s possible. First of all, you need to apply some styles to the canvas like this : position: absolute;z-index: 999;.

And then you can apply another styles to the video like this : z-index: 11;

If so, the canvas and the video will be overlapped and canvas will be placed on top of the video like this : enter image description here

Here, you would have one problem… for instance, in some cases you might want to control the video. Meaning, you want to pause/play/stop the video whenever. To do this, you also need to put custom pause, play and stop buttons for the video. But those buttons’ z-index should be higher than 999 since the canvas’s z-index is 999.


CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top