web-dev-qa-db-fra.com

canvas getContext ("2d") renvoie null

J'ai essayé cela de différentes manières, mais je continue à me retrouver avec la même erreur. J'ai déjà chargé une image sur le canevas, mais depuis que j'ai mis à jour Safari il y a quelques jours, je reçois des erreurs.

Je publierai ce que j'ai pour le moment, mais j'ai essayé de le faire avec jQuery, la propriété 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();

Les identifiants sont corrects et correspondent aux balises canvas et img appropriées. Cependant, je continue à obtenir TypeError: 'null' is not an object (evaluating 'cvs.getContext') et il ne semble pas aller plus loin. Je suis sûr que c'est une erreur ID10T, mais j'espère que quelqu'un pourra me donner une idée de ce qui cause cela? Je vous remercie.

Edit: D'accord, donc cela semble fonctionner en utilisant <body onload="init()"> maintenant. Cependant, il ne s'affiche que de temps en temps et si j'essaie d'exécuter init() à partir de $(document).ready() ou document.onload Je n'ai toujours pas de chance et je reçois l'erreur. Des pensées?

javascripthtml5canvashtml5-canvas
27
stslavik

Lorsque vous faites cela:

window.onload = init();

la fonction init() sera exécutée immédiatement (ce qui provoque l'erreur, car getContext() est appelée trop tôt, c'est-à-dire avant le chargement du DOM), et la valeur de retour de init() sera stocké dans window.onload.

Vous voulez donc réellement faire ceci:

window.onload = init;

Notez le () Manquant.

31
Floern

Pour ceux qui ont accédé à cette page lors de la recherche de getContext renvoyant null, cela peut se produire si vous avez déjà demandé un type de contexte différent.

Par exemple:

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

Il en va de même si vous inversez l'ordre des appels.

79
Drew Noakes

Cela n'a rien à voir avec la question réelle, mais puisque cette question est le premier résultat lors de la recherche sur Google getContex("2d") null j'ajoute la solution au problème que j'ai eu:

Assurez-vous que vous utilisez getContext("2d") et non getContext("2D") - notez les minuscules d.

12
nEJC

Il suffit de mettre votre JavaScript à la fin de la page, il mettra fin à vos problèmes ... j'ai tout essayé, mais c'est la solution la plus logique et la plus simple .. car ce JS ne fonctionnera qu'après l'autre partie (c'est-à-dire le page supérieure) a chargé .. espérons que cette aide

7
Kunal0615

Assurez-vous que javascript s'exécute après l'élément HTML du canevas

C'est mauvais

<body>
    <script src="Canvas.js"></script>
    <canvas id="canvas"></canvas>
</body>

C'est bien

<body>
    <canvas id="canvas"></canvas>
    <script src="Canvas.js"></script>'
</body>

Voici comment j'ai résolu mon problème

0
Duba911