Home/ Questions/Q 7071223
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T05:39:43+00:00

This is the code, (don’t kill me, i’ve just started to study javascript)…Firefox’errors console

  • 0

This is the code, (don’t kill me, i’ve just started to study javascript)…Firefox’errors console returns me the error “Canvas is null” but i don’t understandwhy. I guess that maybe it could be cause i’ve passed the variable id in a bad way.

<html>
<canvas id="c1">
Your browser doesn't support canvas!
</canvas>

<video style="display:none;" id="video1" controls height="600px" width="800px" >
<source src="videos/movie.mp4" type="vide/mp4" >
<source src="videos/movie.ogv" type='video/ogg; codecs="theora, vorbis"'/>
<source src="videos/movie.webm" type='video/webm' >
</video>


<script type="text/javascript">

document.addEventListener('DOMContentLoaded', function () {

    video = document.getElementById("video1");
    video.height = 600;
    video.width = 400;
    video.play();
    aggiornacanvas("c1");

    function aggiornacanvas(id) {
        canvas = document.getElementById(id);
        canvasContext = canvas.getContext("2d");
        canvasContext.drawImage(video, 0, 0);
        data = canvasContext.getImageData(0, 0, canvas.width, canvas.height);

        //Modificare qui i dati dell'immagine
        canvasContext.putImageData(data, 0, 0);
        setTimeout(aggiornacanvas, 0);

    }




}, false);    


</script>
</html>

Ok, now it works but there is another errors

function aggiornacanvas(id)
{
    canvas = document.getElementById(id);
    canvasContext = canvas.getContext("2d");
    canvasContext.drawImage(video,0,0);
    var data = canvasContext.getImageData(0,0,canvas.width,canvas.height);
    alert("ok");    
    canvasContext.putImageData(data,0,0);
    setTimeout(aggiornacanvas(id),40);

}

In this way it not works, and i get ok only one time…but if i write

function aggiornacanvas(id)
{
    canvas = document.getElementById(id);
    canvasContext = canvas.getContext("2d");
    canvasContext.drawImage(video,0,0);
    //var data = canvasContext.getImageData(0,0,canvas.width,canvas.height);
    alert("ok");    
    //canvasContext.putImageData(data,0,0);
    setTimeout(aggiornacanvas(id),40);

}

it works!The problem is that i think that lines are correnct so i can’t understand why it doesn’t work whit them 🙁

UPDATED It works!That was a problem of browser that don’t allow to access at imagedata locally! THANKS guys, my first question on there it’s been answered!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are calling aggiornacanvas from your setTimeout, but aggiornacanvas requires a parameter – the id of your canvas element. Since that parameter is missing, your variable canvas is null. Hence, the error.

    Change your setTimeout to call aggiornacanvas with a parameter by wrapping it in an anonymous function.

    setTimeout(function () {
    aggiornacanvas(id);
}, 0);

    But, holy smokes! Don’t do that! This will call aggiornacanvas over and over without stopping and spike your CPU! What are you trying to achieve?

    • 0