canvas getContext ("2d") devuelve nulo

He intentado esto de diferentes maneras, pero sigo atascado con el mismo error. He cargado una imagen en lienzo antes, pero desde que actualicé Safari hace unos días, recibo errores.canvas getContext ("2d") devuelve nulo

Voy a publicar lo que tengo en este momento, pero he intentado hacerlo con jQuery, propiedad onLoad de html, etc.

var cvs, ctx, img; 
function init() { 
    cvs = document.getElementById("profilecanvas"); 
    ctx = cvs.getContext("2d"); /* Error in getContext("2d") */ 
    img = document.getElementById("profileImg"); 
    drawImg(); 
} 

function drawImg() { 
    ctx.drawImage(img, 0, 0); 
} 

window.onload = init();

Los identificadores son correctos y corresponden a las etiquetas apropiadas lona e img . Sin embargo, sigo recibiendo TypeError: 'null' is not an object (evaluating 'cvs.getContext') y parece que no va más allá. Estoy seguro de que es un error de ID10T, pero espero que alguien pueda darme una pista sobre qué está causando esto. Gracias.

Edit: Bien, así que esto parece funcionar usando <body onload="init()"> ahora. Sin embargo, solo se muestra ocasionalmente, y si trato de ejecutar init() fuera de $(document).ready() o document.onload, todavía no tengo suerte y recibo el error. ¿Alguna idea?

Fuente

2011-07-22 stslavik

puede agregar su html – austinbv

Al hacer esto:

window.onload = init();

la función init() se ejecutará inmediatamente (lo que causa el error, porque getContext() es llamado demasiado pronto, es decir, antes de que el DOM está cargado), y el valor de retorno de init() se almacenará en window.onload.

Así que quieres realmente hacer esto:

window.onload = init;

Nota la falta ().

Fuente

2011-07-22 21:28:35 Floern

Vaya, tiene toda la razón. Realmente no puedo creer que lo haya hecho ... Muchas gracias. – stslavik

+1 Buena detección – Variant

Tengo el mismo problema que @stslavik, en Safari también. Parece que no puedo hacer que funcione; incluso sin método init o enfoque diferente, siempre tiene problemas con el contexto nulo. ¿Alguna idea? :/ – trainoasis

Para los demás que aciertan a esta página mientras buscan getContext devolviendo nulo, puede suceder si ya ha solicitado un tipo diferente de contexto.

Por ejemplo:

var canvas = ...; 
var ctx2d = canvas.getContext('2d'); 
var ctx3d = canvas.getContext('webgl'); // will always be null

Lo mismo es igualmente cierto si se invierte el orden de las llamadas.

Fuente

2012-11-15 21:39:04

Entonces, ¿qué puedo hacer para obtener el contexto después de que ya solicité un tipo diferente de contexto? – TSR

@TSR, tengo la sensación de que no es posible, pero no soy una autoridad. Esto podría ser útil: https://html.spec.whatwg.org/multipage/scripting.html # the-canvas-element –

Si necesita visualizar tanto 2D como 3D en el lienzo, considere apilar dos elementos de lienzo y hacer que el más alto tenga un fondo transparente. –

Simplemente ponga su JavaScript al final de la página ... pondrá fin a sus problemas ... intenté de todo, pero esta es la solución más lógica y simple ... ya que JS se ejecutará solo después de la otra parte (es decir, la página superior) se ha cargado .. espero que esto ayuda

Fuente

2014-04-15 17:13:56 Kunal0615

Esta es una de las prácticas básicas que uno puede hacer para lograr JS sin errores. y funciona ... entonces, ¿quién ha votado un -1 por favor, reconsidere su postura o al menos coméntelo ... corríjanme si puede – Kunal0615

No lo rechacé, pero sospecho que el motivo del infractor fue que mientras su problema es una mejor práctica (en algunos casos) la pregunta incluía un error específico que no se resolvería con esta sugerencia. En otras palabras, puede ser un buen consejo, pero es irrelevante para esta pregunta. – John

Esto funcionó para mí. Gracias por el recordatorio de buenas prácticas. – RayLoveless

esto no tiene nada que ver con la pregunta real, pero ya que esta cuestión es el primer resultado cuando googlear getContex("2d") null estoy añadiendo la solución a un problema que tenía:

Asegúrese de utilizar getContext("2d") y no getContext("2D") - observe la minúscula d.

Fuente

2016-03-29 11:01:37 nEJC

canvas getContext ("2d") devuelve nulo

Respuesta

Cuestiones relacionadas