canvas getContext("2d") returns null

user_345585 0
Viewed 71545

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?

html5-canvas canvas html javascript
7 Answers

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.

user_20967690

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

user_113085630

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.

user_156626120
Related