Breaking News: Grepper is joining You.com. Read the official announcement!

draw on canvas from video element js

Light Loris answered on September 7, 2020 Popularity 9/10 Helpfulness 5/10

answer draw on canvas from video element js

draw on canvas from video element js

Comment

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var video = document.getElementById('video');

// set canvas size = video size when known
video.addEventListener('loadedmetadata', function() {
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
});

video.addEventListener('play', function() {
  var $this = this; //cache
  (function loop() {
    if (!$this.paused && !$this.ended) {
      ctx.drawImage($this, 0, 0);
      setTimeout(loop, 1000 / 30); // drawing at 30fps
    }
  })();
}, 0);

Popularity 9/10 Helpfulness 5/10 Language javascript

Source: stackoverflow.com

Tags: canvas draw element javascript video

Link to this answer
Share Copy Link