Media types and the canvas
Basic loading and playing a video on the canvas
The canvas can be used to display videos 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 screenplay/pause toggle. This StackOverflow self answered the question How do I display a video using HTML5 canvas tag shows the following example code in action.
Just an image
A video is just an image as far as the canvas is concerned. You can draw it like any image. The difference being the video can play and has sound.
Get canvas and basic setup
Unlike images elements, videos don't have to be fully loaded to be displayed on the canvas. Videos also provide a host of extra events that can be used to monitor status of the video. In this case, we wish to know when the video is ready to play. on can play means that enough of the video has loaded to play some of it, but there may not be enough to play to the end.
Alternatively you can use oncanplaythrough which will fire when enough of the video has loaded so that it can be played to the end.
Only use one of the canPlay events not both.
The can play event (equivalent to image onload)
The video will not play itself on the canvas. You need to draw it for every new frame. As it is difficult to know the exact frame rate and when they occur the best approch is to display the video as if running at 60fps. If the frame rate is lower then w just render the same frame twice. If the frame rate is higher then there is nothing that can be
don to see the extra frames so we just ignore them. The video element is just a image element and can be draw like any image, you can scale, rotate, pan the video, mirror it, fade it, clip it and display only parts, draw it twice the second time with a global composite mode to add FX like lighten, screen, etc..
Basic play pause control
Now we have the video loaded and displayed all we need is the play control. We will make it as a click toggle play on the screen. When the video is playing and the user clicks the video is paused. When paused the click resumes play. We will add a function to darken the video and draw an play icon (triangle).
Playing a video is very easy using the canvas, adding effect in real time is also easy. There are however some limitations on formats, how you can play and seek. MDN HTMLMediaElement is the place to get the full reference to the video object. Once the image has been drawn on the canvas you can use ctx.getImageData to access the pixels it contains. Or you can use canvas.toDataURL to snap a still and download it. (Only if the video is from a trusted source and does not taint the canvas). Note if the video has sound then playing it will also play the sound.
Capture canvas and Save as webM video
Creating a WebM video from canvas frames and playing in canvas, or upload, or downloading.
Example capture and play canvas
Rather than put in a huge effort only to be rejected, this is a quick insert to see if acceptable. Will Give full details if accepted. Also include additional capture options for better HD capture rates (removed from this version, Can capture HD 1080 at 50fps on good machines.)This was inspired by Wammy but is a complete rewrite with encode as you go methodology, greatly reducing the memory required during capture. Can capture more than 30 seconds better data, handling algorithms.
Drawing an svg image
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.
SVG images have some advantages over raster ones, since you won't loose quality, whatever the scale you'll draw it on your canvas. But beware, it may also be a bit slower than drawing a raster image.
However, SVG images come with more restrictions than raster images.
- For security purpose, no external content can be loaded from an SVG image referenced in an HTMLImageElement(<img>) No external stylesheet, no external image referenced in SVGImage (<image/>) elements, no external filter or element linked by the xlink:href attribute (<use xlink:href="anImage.SVG#anElement"/>) or the funcIRI (url()) attribute method etc. Also, stylesheets appended in the main document won't have any effect on the SVG document once referenced in an HTMLImage element. Finally, no script will be executed inside the SVG Image. Workaround : You'll need to append all external elements inside the SVG itself before referrencing to the HTMLImage element. (for images or fonts, you need to append a dataURI version of your external resources).
- The root element (<svg>) must have its width and height attributes set to an absolute value. If you were to use relative length (e.g %), then the browser won't be able to know to what it is relative. Some browsers (Blink) will try to make a guess, but most will simply ignore your image and won't draw anything, without a warning.
- Some browsers will taint the canvas when an SVG image has been drawn to it. Specifically, Internet-Explorer < Edge in any case, and Safari 9 when a <foreignObject> is present in the SVG image.
Loading and displaying an Image
To load an image and place it on the canvas
Creating an image
There are several ways to create an image
- new Image()
- <img src = 'imageUrl' id='myImage'> As part of the HTML body and retrieved with document.getElementById('myImage')
The image srccan be any valid image URL or encoded dataURL. See this topic's Remarks for more information on
image formats and support.
- image.src = "http://my.domain.com/images/myImage.jpg"
- image.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" *
Remarks on loading and errors
The image will begin loading when its src property is set. The loading is syncriouse but the onload event will not be called until the function or code has exited/returned.
If you get an image from the page (for example document.getElementById("myImage")) and its src is set it may or may not have loaded. You can check on the status of the image with HTMLImageElement.complete which will be true if complete. This does not mean the image has loaded, it means that it has either
- there was an error
- src property has not been set and is equal to the empty String ""
If the image is from an unreliable source and may not be accessible for a variety of reasons it will generate an error event. When this happens the image will be in a broken state. If you then attempt to draw it onto the canvas it will throw the following error
ATutorialHub Related Guide
panduranga gupta2021-07-05 07:03:13
good website for learning and help me a lot
The awsome website i am looking like for a long time, good work atutorialhub team keep doing
Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience
It is very helpful to students and easy to learn the concepts
Great job Tutorials are easy to understand Please make use of it
Zain Khan2021-09-18 15:07:23
Great content and customized courses.
Rudrakshi Bhatt2021-09-09 15:08:10
Well structured coursed and explained really well!
Pavana Somashekar2021-09-11 15:09:08
Good platform for beginners and learn a lot on this website