Template for issues

by brightertools

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="720" height="405"></canvas>

<video crossorigin="anonymous" id="video" style="display:none" preload="auto" width="720" height="405" class="canvas-img" >



<source src="https://res.cloudinary.com/mediamarkup/video/upload/s--PO5mkXA4--/v1/35b13e9dba0a476eadfd4bd1fd5cf191/1b40574ef22b4f5d85912a8d846c66e0.mp4">

</video>

CSS

canvas {
    border: 1px solid #999;
}

JavaScript

/**
 * fabric.js template for bug reports
 *
 * Please update the name of the jsfiddle (see Fiddle Options).
 * This templates uses latest dev verison of fabric.js (https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js).
 */

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');

// ADD YOUR CODE HERE
var anim = function() {
canvas.renderAll();
fabric.util.requestAnimFrame(anim);
};

var video = document.getElementById('video');
var backgroundVideo = new fabric.Image(video,
                                {
                                    id: 'backgroundImage',
                                    left: 0,
                                    top: 0,
                                    width:720,
																		height: 405,
                                    originX: 'left',
                                    originY: 'top'
                                });
                                
canvas.add(backgroundVideo);
setTimeout(function() {
backgroundVideo.currentTime = 0;
backgroundVideo.getElement().play();
canvas.renderAll();
fabric.util.requestAnimFrame(anim);
}, 3000);