2

I want to draw a video to the canvas.

I expect the video to look the same on canvas as it would if drawn without the canvas.

However, the quality is terrible.

Here is the source video: https://media.w3.org/2010/05/sintel/trailer.mp4

Here is a fiddle showing the terrible quality: https://jsfiddle.net/hup1cywc/

Here is the code equivalent of the fiddle:

<!DOCTYPE html>
<html>
    <body>
        <canvas id="canvas" style="width: 854px; height: 480px"></canvas>
        <script type="text/javascript">
        var context = canvas.getContext('2d');
        var video = document.createElement('video');
        video.type = 'video/mp4';
        video.src = 'https://media.w3.org/2010/05/sintel/trailer.mp4';
        video.addEventListener('canplaythrough', function() {
            video.play();
            animate();
        });
        function animate() {
            requestAnimationFrame(animate);
            context.drawImage(video, 0, 0, canvas.width, canvas.height);
        }
        </script>
    </body>
</html>

Why is the quality so poor?

Joncom
  • 1,985
  • 1
  • 18
  • 29

1 Answers1

3

Because I was setting canvas width and height via CSS, so the canvas was internally much smaller than pixels it was visually occupying on screen.

Joncom
  • 1,985
  • 1
  • 18
  • 29