CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvas
stslavik
stslavik

Reputation: 3028

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?

Upvotes: 49

Views: 84710

Answers (7)

Riya Sharma
Riya Sharma

Reputation: 1

I was facing the same problem and now it is resolved by using var canvas=document.querySelector("canvas"); instead of var canvas=document.getElementById("canvas");.

The difference is:

var canvas=document.querySelector("canvas"); is getting the element from tag name canvas.

var canvas=document.getElementById("canvas"); is getting the element from the id named canvas.

You can try this out.

Upvotes: 0

Chris Hayes
Chris Hayes

Reputation: 13696

It should be noted that the context is not always 2d. All possible values that I'm aware of:

'2d'
'webgl'
'webgl2'
'experimental-webgl'
'bitmaprenderer'

MDN getContext(): https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#parameters

From the MDN doc above:

Return value

A rendering context which is either

If the contextType doesn't match a possible drawing context, or differs from the first contextType requested, null is returned.

Upvotes: 9

Duba911
Duba911

Reputation: 11

Make sure javascript runs after the canvas HTML element

This is bad

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

This is good

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

This is basically how I fixed my problem

Upvotes: 1

Floern
Floern

Reputation: 33904

When you do this:

window.onload = init();

the function init() will be executed immediately (what causes the error, because getContext() gets called too early, i.e. before the DOM is loaded), and the return value of init() will be stored to window.onload.

So you want to actually do this:

window.onload = init;

Note the missing ().

Upvotes: 36

nEJC
nEJC

Reputation: 555

This has nothing to do with actual question, but since this question is first result when googling getContex("2d") null I'm adding the solution to problem I had:

Make sure that you use getContext("2d") and not getContext("2D") - notice the lower-case d.

Upvotes: 26

Kunal0615
Kunal0615

Reputation: 395

Just put your JavaScript at the end of the page it will ... put an end to your problems... i tried everything but this the most logical and simple solution.. as that JS will run only after the other part(ie the upper page) has loaded.. hope this help

Upvotes: 9

Drew Noakes
Drew Noakes

Reputation: 310832

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.

Upvotes: 141

Related Questions