1

I am new with canvas and I've been Googling for a couple of hours, but I am stuck.

What I would like to do is to render a video on a canvas element, divide it and animate the pieces. I am halfway there (see: http://jsbin.com/riduxadazi/edit?html,css,js,console,output ) but I have a couple of questions:

  1. Am I doing things right, or is this extremly inefficient?
  2. I would like to use the video fullscreen. Whatever I try, the canvas grid + video don't seem to match size.
  3. I would like to animate the pieces of the video, but I have no clue how I should address them. Can I get some sort of array and animate the pieces one by one?

My JS looks like this. I tried to add comments to the most important parts. At least what I think were the most important parts ;)

var video = document.getElementById('video'); // Get the video
var ctx = canvas.getContext('2d'), 
    columns = 6,
    rows = 4,
    w, h, tileWidth, tileHeight;

// Start video and add it to canvas
video.addEventListener('play', function() {
    var $this = this; //cache
    (function loop() {
      if (!$this.paused && !$this.ended) {

        ctx.drawImage($this, 0, 0,window.innerWidth,window.innerHeight); 

        calcSize(); // Divide video

        setTimeout(loop, 1000 / 30); // drawing at 30fps
      }
    })();
  }, 0);  

function calcSize() {
    video.width = w = window.innerWidth;
    video.height = h = window.innerHeight;

    tileWidth = w / columns;
    tileHeight = h / rows;

    ctx.strokeStyle = '#000';

    render();
}
function render() {

    for(var x = 0; x < columns; x++) {
        ctx.moveTo(x * tileWidth, 0);
        ctx.lineTo(x * tileWidth, h);
    }
    for(var y = 0; y < rows; y++) {
        ctx.moveTo(0, y * tileHeight);
        ctx.lineTo(w, y * tileHeight);
    }
    ctx.stroke();
}
mat
  • 1,619
  • 1
  • 15
  • 25
  • so right now you are just drawing a grid over your video right ? You will have to use the coordinates of your cells with the cropping options of [drawImage](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/drawImage) to actually split your video. – Kaiido May 02 '16 at 08:53

1 Answers1

1

You would perhaps consider:

  • Using requestAnimationFrame to update the loop. This allows for perfect synchronization with the monitor update rate as well as being more efficient than setTimeout/setInterval You could throttle it so you only update per 1/30 frame to match video rate by using a simple boolean flag that alternates.
  • The video element does not need to be inserted into DOM. Also, the actual video bitmap size is read through the properties videoWidth and videoHeight, though, in the provided code you should use canvas' properties width and height as this determine the destination size. To draw proportional you can for example use this answer.
  • Using drawImage() using the clipping parameters would be the more efficient way to draw video onto canvas if you want to split the content.
  • You could split your video using a mathematical approach (see this answer) or using objects which allows you to define source regions and have individual properties on it such as position, rotation, scale and so forth. In case you would have to consider destination position to adopt to the current size of canvas.
Community
  • 1
  • 1