Tutorial by Examples

To load an image and place it on the canvas var image = new Image(); // see note on creating an image image.src = "imageURL"; image.onload = function(){ ctx.drawImage(this,0,0); } Creating an image There are several ways to create an image new Image() document.createEleme...

To draw a vector SVG image, the operation is not different from a raster image : You first need to load your SVG image into an HTMLImage element, then use the drawImage() method. var image = new Image(); image.onload = function(){ ctx.drawImage(this, 0,0); } image.src = "someFile.SVG&...

The canvas can be used to display video from a variety of sources. This example shows how to load a video as a file resource, display it and add a simple click on screen play/pause toggle. This stackoverflow self answered question How do I display a video using HTML5 canvas tag shows the following ...

Creating a WebM video from canvas frames and playing in canvas, or upload, or downloading. Example capture and play canvas name = "CanvasCapture"; // Placed into the Mux and Write Application Name fields of the WebM header quality = 0.7; // good quality 1 Best < 0.7 ok to poor fps =...