Draw video on canvas HTML5

Question

I\'m trying to draw a video on a canvas. To achieve this I capture the onMouseDown and onMouseUp events in Javascript to get the x and y coordinates of each event (that I need t

Answer 1

1) The drawImage() method was only be called once. It needs to be called once per frame.

2) Call pause() method to stop video.

For example, the follow code starts a timer loop (for drawing the frames) on mouse up and stops any previous video on mouse down.

var canvas, context, video, xStart, yStart, xEnd, yEnd;

canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
canvas.addEventListener("mousedown", mouseDown);
canvas.addEventListener("mouseup", mouseUp);

function mouseDown(e) {
    if (video) {
        video.pause();
        video = null;
        context.clearRect(0, 0, canvas.width, canvas.height);
    }
    xStart = e.offsetX;
    yStart = e.offsetY;
}

function mouseUp(e) {
    xEnd = e.offsetX;
    yEnd = e.offsetY;
    if (xStart != xEnd && yStart != yEnd) {
        video = document.createElement("video");
        video.src = "http://techslides.com/demos/sample-videos/small.mp4";
        video.addEventListener('loadeddata', function() {
            console.log("loadeddata");
            video.play();
            setTimeout(videoLoop, 1000 / 30);
        });
    }
}

function videoLoop() {
    if (video && !video.paused && !video.ended) {
        context.drawImage(video, xStart, yStart, xEnd - xStart, yEnd - yStart);
        setTimeout(videoLoop, 1000 / 30);
    }
}