Html5 canvas and video

Question

How can I make a canvas for the video to fit perfectly in the area

score 1 · Answer 1 · answered May 26 '16 at 19:43

1

...It can't be done with native Html5 Canvas transformations.

You are trying to transform the display Canvas content (== your video) into a non-parallelogram -- which is not possible with native Canvas transformations. The Canvas can only be reshaped into parallelograms.

But...

You can skew the canvas to approximate your desired display.

The gold parallelogram in this image can be done with native Canvas transformations

Example code an a Demo:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var angle=-Math.PI*.06;
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/billboard1.jpg";
function start(){
    cw=canvas.width=img.width;
    ch=canvas.height=img.height;
    ctx.drawImage(img,0,0);
    ctx.transform(1,Math.tan(angle),0,1,0,0);
    ctx.strokeStyle='gold';
    ctx.lineWidth=4;
    ctx.strokeRect(333,135,275,150);
}

<canvas id="canvas" width=300 height=300></canvas>

answered May 26 '16 at 19:43

markE

102,905
11
164
176

Ok, is not any other way ? I m trying to get that video shape to fit that desired frame... and to resize auto when window size changes (just like I ve managed with the frame). Managed to tranform the video with CSS but when window size changes it does not change the height. Thanks tho. – Ionita Cristian-Valentin May 26 '16 at 20:15
You can "fake" non-parallel skewing by slicing the video image into many vertical slices and then stretching them to fit the billboard. But slicing & stretching at 24-30 frames per second will cause all but the fastest devices to jitter. – markE May 26 '16 at 20:34
How can I archieve that ? – Ionita Cristian-Valentin May 26 '16 at 20:43
Again ... I warn against trying to do slicing & stretching at 24-30 fps -- you will be doing a disservice to less capable devices. If you want to try, here's a [Q&A](http://stackoverflow.com/questions/24527186/html-canvas-svg-draw-image-on-cylinder-surface/24536211#24536211) showing how. – markE May 26 '16 at 20:48
It is for a frontend (PCs only). Thanks – Ionita Cristian-Valentin May 26 '16 at 21:07

score 0 · Accepted Answer · edited May 23 '17 at 11:58

Drawing process

Prepare the background image offline by removing the red area making an alpha channel out of it instead, then use it like this:

Draw the video to canvas with transformation applied matching closely the shape plus a little overlap
Draw the background (or parts of it after first draw) on top of the video. This will mask the edges of the video that doesn't fit perfectly.

Transformation

Offline process:

Plot the points of the (now) alpha area so you have the coordinates, either a triangle or a quadrilateral. Note: canvas only support affine transformations (2D/parallelograms) so triangle has to be used. For CSS you can use 3D transforms with basis in a quadrilateral shape.
Normalize the values

In action:

Scale the canvas and the normalized values to the desired size
Apply transform, draw video, draw background as overlay on top of video

And since most video is max 30 frames per second you can also throttle the drawing loop to half to leave more resources for other things (use requestAnimationFrame() with a toggle flag).

Alternative approach:

Prepare a video with everything setup as you want. It should compress well since the surrounding areas don't change (use a long key-frame interval), and in this case the background doesn't contain much details due to low depth-of-field which also helps.

Html5 canvas and video

2 Answers2