I'm drawing a video on a canvas, this works fine with Safari / Chrome / Firefox / Opera, but on the iPad, even though the video plays, (correct codec, etc) it is never rendered on the canvas,

Basically I just call :

canvas.getContext("2d").drawImage(video, 0, 0);

when the video is playing, and stop doing this when the video is paused or ended.

Is there anything else I should consider? Like clearing the canvas?

I'm drawing a video on a canvas, this works fine with Safari / Chrome / Firefox / Opera, but on the iPad, even though the video plays, (correct codec, etc) it is never rendered on the canvas,

Basically I just call :

canvas.getContext("2d").drawImage(video, 0, 0);

when the video is playing, and stop doing this when the video is paused or ended.

Is there anything else I should consider? Like clearing the canvas?

• javascript
• ios
• html
• video
• canvas

• Well I just tried Apple's own HTML5 demos on my iphone, and when I tried playing the video the result was it opened in its own full-screen app rather than in the browser. Not entirely sure if the mobile version of Safari supports inline videos. – GordonM Commented Jul 1, 2011 at 10:15
• @Stacker-flow can you confirm this fiddle doesn't work on your system please? – Kaiido Commented Mar 9, 2020 at 9:58
• I don't know about iPad, but this solution works on an iPhone 6S running iOS 13.4.1: gist.github./diachedelic/cf758562ad6fdf7db79f474f5528dec0 – diachedelic Commented May 27, 2020 at 5:04

4 Answers 4

For now safari on iPad is not supporting this feature. There are some limits on the attributes and events of canvas tag and video tag of HTML5 particularly on iPad. The attributes and events of canvas and video tags which work fine on desktop browsers wont work on iPad. This is my personal experience too.

See Putting Video on Canvas

You basically can’t pass a video object to the canvas drawImage method. Apple suggests having the video positioned behind the canvas but this won’t help if you want to manipulate the video somehow.

Have you tried wrapping it inside the requestAnimationFrame() function.

<video src="YourSrcFile.webm" autolay muted></video>
         // Fallback to mp4 if not supported.
<canvas></canvas>

    const video = document.querySelector("video");      // Offscreen Canvas.
    const canvas = document.querySelector("canvas");    // Onscreen Canvas.

          canvas.style.zIndex = '50';
    const ctx = canvas.getContext("2d");

    video.addEventListener('play',()=>{
      function step() {
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
        requestAnimationFrame(step)
      }
      requestAnimationFrame(step);
    })

Make sure to Match both the onscreen & offscreen canvas to the original videos aspect ratio otherwise the extra calculations make it laggy & poor performance.. You can use Transform Scale inside your css to resize it aslong as its proportionately. Which doesn't seem to make it glitchy, but I'd suggest converting the video from mp4, avi or other file type to webm..

just used this for a vjloop and its running smooth.

Try these and see if it makes any difference..

<script>
document.addEventListener('DOMContentLoaded', function(){
    var v = document.getElementById('v');
    var canvas = document.getElementById('c');
    var context = canvas.getContext('2d');

    var cw = Math.floor(canvas.clientWidth / 100);
    var ch = Math.floor(canvas.clientHeight / 100);
    canvas.width = cw;
    canvas.height = ch;

    v.addEventListener('play', function(){
        draw(this,context,cw,ch);
    },false);

},false);

function draw(v,c,w,h) {
    if(v.paused || v.ended) return false;
    c.drawImage(v,0,0,w,h);
    setTimeout(draw,20,v,c,w,h);
}
</script>