Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

canvas getContext("2d") returns null

I've tried this a few different ways, but I keep getting stuck with the same error. I've loaded an image to canvas before, but since I updated Safari a few days ago, I'm getting errors.

I'll post what I have at the moment, but I've tried doing it with jQuery, html's onLoad property, 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(); 

The IDs are correct and correspond to appropriate canvas and img tags. However, I keep getting TypeError: 'null' is not an object (evaluating 'cvs.getContext') and it doesn't seem to be getting any further. I'm sure it's some ID10T error, but I'm hoping someone can give me a clue as to what's causing this? Thank you.

Edit: Okay, so this seems to work using <body onload="init()"> now. However, it only displays occasionally, and if I try to run init() off of $(document).ready() or document.onload I still have no luck, and receive the error. Any thoughts?

like image 636
stslavik Avatar asked Jul 22 '11 21:07

stslavik


People also ask

What does canvas getContext return?

getContext() method returns a drawing context on the canvas, or null if the context identifier is not supported, or the canvas has already been set to a different context mode.

What is canvas getContext (' 2D ')?

The CanvasRenderingContext2D interface, part of the Canvas API, provides the 2D rendering context for the drawing surface of a <canvas> element. It is used for drawing shapes, text, images, and other objects.

Can not read property getContext?

The "Cannot read property 'getContext' of null" error occurs when calling the getContext method on a null value. To solve the error, make sure the JS script tag is loaded after the HTML is declared and the id of the element exists in the DOM.

What does CTX mean in Javascript?

It is just name for variable. It could be anything. Ctx is just short word for ConTeXt.


1 Answers

For others who hit this page while searching for getContext returning null, it can happen if you have already requested a different type of context.

For example:

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

The same is equally true if you reverse the order of calls.

like image 96
Drew Noakes Avatar answered Oct 09 '22 13:10

Drew Noakes