JSFiddle - React, Tailwind, and code Playground

by brightertools

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<video width="640" height="360" id="video" style="display: none" muted>
  <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4">
  <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv">
</video>

<canvas id="c" width="640" height="360" style="border:1px solid #ccc"></canvas>

JavaScript

window.cancelRequestAnimFrame = (function(){
	return 	window.cancelAnimationFrame ||
			window.webkitCancelRequestAnimationFrame ||
			window.mozCancelRequestAnimationFrame ||
			window.oCancelRequestAnimationFrame ||
			window.msCancelRequestAnimationFrame ||
			clearTimeout
})();

var canvas = new fabric.Canvas('c');
var videoEl = document.getElementById('video');
var video = new fabric.Image(videoEl);

canvas.add(video);
video.getElement().play();

var circle = new fabric.Circle({radius: 100,
                 fill: '',
                 stroke: 'red',
                 strokeWidth: 3,
                 originX: 'center', 
                 originY: 'center' 
               });
            var text = new fabric.Text('HELLO WORLD.',
                        {  fontSize: 30, 
                            originX: 'center', 
                            originY: 'center',
                            fill : 'red' 
                          });
            var group = new fabric.Group([ circle, text ], { 
                                           left: 150, top: 100
                                         });
            canvas.add(group);

var request;
var render = function() {
	canvas.renderAll();
	request = fabric.util.requestAnimFrame(render);
	var current_time = videoEl.currentTime;
	if(current_time >= 5) {
  	videoEl.pause();
    cancelRequestAnimFrame(request);
	}
  console.log(current_time);
}

videoEl.play();
fabric.util.requestAnimFrame(render);