TypeError: No se puede llamar al método 'getContext' de null (función anónima)

Soy un principiante en esto y realmente no he hecho ningún JavaScript antes, así que espero que me puedan ayudar. Hice un lienzo que permite al usuario elegir una forma y un color con botones de radio que luego se dibujan en el lienzo. También agregué una casilla con la opción de agregar un degradado al color elegido. Aquí está el programa: http://people.dsv.su.se/~caak1743/Canvas/canvas.html TypeError: No se puede llamar al método 'getContext' de null (función anónima)

Ahora quiero que las formas se puedan arrastrar y soltar por el área del lienzo. Y he encontrado un código que creo que puede ser modificado para trabajar en mi programa, pero me siguen dando: TypeError: No se puede llamar al método 'getContext' de null init (función anónima) para la línea:

 var ctx = canvas.getContext("2d");

y no tengo idea de qué es lo que está mal o cómo puedo solucionarlo. Intenté buscar programas similares con problemas similares pero no encontré nada que pueda aplicar aquí. Aquí está el código que estoy tratando de incorporar a la mía:

function init() { 
    var canvas = document.getElementById("myCanvas"); 
    var ctx = canvas.getContext("2d"); 
    return setInterval(draw, 10); 
    } 

    function draw() { 
    clear(); 
    ctx.fillStyle = "#FAF7F8"; 
    rectangle(0,0,WIDTH,HEIGHT); 
    ctx.fillStyle = "#444444"; 
    rectangle(); 
    } 

    function myMove(e){ 
    if (dragok){ 
    x = e.pageX - canvas.offsetLeft; 
    y = e.pageY - canvas.offsetTop; 
    } 
    } 

    function myDown(e){ 
    if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 + 
    canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop && 
    e.pageY > y -15 + canvas.offsetTop){ 
    x = e.pageX - canvas.offsetLeft; 
    y = e.pageY - canvas.offsetTop; 
    dragok = true; 
    canvas.onmousemove = myMove; 
    } 
    } 

    function myUp(){ 
    dragok = false; 
    canvas.onmousemove = null; 
    } 

    init(); 
    canvas.onmousedown = myDown; 
    canvas.onmouseup = myUp;

Fuente

2012-05-18 Fieldflower

Sólo corregirlo a lo siguiente:

<script type="text/javascript"> 
window.onLoad=function(){ init();}; 
    function init() { 
    var canvas = document.getElementById("myCanvas"); 
    var ctx = canvas.getContext("2d"); 
    return setInterval(draw, 10); 
    } 

    function draw() { 
    clear(); 
    ctx.fillStyle = "#FAF7F8"; 
    rectangle(0,0,WIDTH,HEIGHT); 
    ctx.fillStyle = "#444444"; 
    rectangle(); 
    } 

    function myMove(e) { 
    if (dragok) { 
     x = e.pageX - canvas.offsetLeft; 
     y = e.pageY - canvas.offsetTop; 
    } 
    } 

    function myDown(e) { 
    if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 + 
     canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop && 
     e.pageY > y -15 + canvas.offsetTop) { 
     x = e.pageX - canvas.offsetLeft; 
     y = e.pageY - canvas.offsetTop; 
     dragok = true; 
     canvas.onmousemove = myMove; 
    } 
    } 

    function myUp() { 
    dragok = false; 
    canvas.onmousemove = null; 
    } 

    init(); 
    canvas.onmousedown = myDown; 
    canvas.onmouseup = myUp; 
</script>

Esto debería funcionar. El problema es que el elemento canvas necesita estar listo para ejecutar el script. Como la sección <script> en <head> se ejecuta antes de cargar el <canvas>, da el error.

Fuente

2012-07-15 13:18:43 Avinash

Hola Mr @ meetar puedo usar lienzo en Reaccionar nativo – Lavaraju

Encontré dos soluciones. Lo primero es agregar jquery a su página y luego no hay necesidad de usar jt-html envolviendo todo el código js en

$(document).ready(function() { Your code here });

qué hace que el código se ejecute después de que html esté listo, o simplemente cambiando la cabeza y el cuerpo, donde no es necesario utilizar in-html js (ejecuta el html anterior a js). Estos deberían funcionar

Fuente

2013-12-21 12:23:54 blesius

Asegúrese de que su secuencia de comandos sea DESPUÉS su elemento canvas.

Fuente

2014-02-28 10:17:23

Simplemente tiene que hacer eso para deshacerse del error. Simplemente agregue el lienzo antes de la secuencia de comandos y siempre coloque la secuencia de comandos al final.

<body> 
<canvas id="ca"></canvas> 

<script type="text/javascript"> 

    var ca = document.getElementById("ca"); 
    var co = ca.getContext("2d"); 

// whatever your code  
</script> 
</body>

Fuente

2014-03-03 07:54:23 rohit

TypeError: No se puede llamar al método 'getContext' de null (función anónima)

Respuesta

Cuestiones relacionadas