'Canvas#getContext' almost never returns 'null'

[cubedhuang]

TypeScript Version: 2.5.3

Code:

let canvas: HTMLCanvasElement = document.createElement("canvas");
let ctx: CanvasRenderingContext2D = canvas.getContext("2d");
ctx.fillRect(0, 0, canvas.width, canvas.height);

Expected behavior:
No errors should occur because the type of canvas is HTMLCanvasElement.

Actual behavior:

test.ts(2,5): error TS2322: Type 'CanvasRenderingContext2D | null' is not assignable to type 'CanvasRenderingContext2D'.
  Type 'null' is not assignable to type 'CanvasRenderingContext2D'.

If I change the type of ctx to CanvasRenderingContext2D | null, then I get

test.ts(3,1): error TS2531: Object is possibly 'null'.

[mhegazy]

From the spec: https://html.spec.whatwg.org/multipage/canvas.html#dom-canvas-getcontext

context = canvas . getContext(contextId [, ... ] )

Returns an object that exposes an API for drawing on the canvas. The first argument specifies the desired API, either "2d", "bitmaprenderer" or "webgl". Subsequent arguments are handled by that API.
This specification defines the "2d" and "bitmaprenderer" contexts below. There is also a specification that defines a "webgl" context. [WEBGL]
Returns null if the given context ID is not supported, or if the canvas has already been initialized with another context type (e.g. trying to get a "2d" context after getting a "webgl" context).

So the definition for getContext to return CanvasRenderingContext2D | null matches the spec. that said.. i have personally found that annoying as well.. it is possible we change the definition to remove the | null in violation of the spec, for convenience.

[weswigham]

For reference,

let canvas: HTMLCanvasElement = document.createElement("canvas");
let ctx: CanvasRenderingContext2D | null;
if (!(ctx = canvas.getContext("2d"))) {
    throw new Error(`2d context not supported or canvas already initialized`);
}
ctx.fillRect(0, 0, canvas.width, canvas.height);

Is a decent way to use it in a typesafe way without really getting in the way; but if you must remove null from the type definition, you should probably only remove it from the overloads for "2d" and "webgl" (and I guess there should be one for "bitmaprenderer"), but not the base signature with string.

[NaridaL]

This just seems like a perfect use case for !, I don't think changing the dts is necessary:

let canvas: HTMLCanvasElement = document.createElement("canvas");
let ctx: CanvasRenderingContext2D = canvas.getContext("2d")!; // <--
ctx.fillRect(0, 0, canvas.width, canvas.height);

[lzxb]

@NaridaL
The first time I saw this write, is there any relevant source?

[NaridaL]

@lzxb https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator

[lzxb]

Thank you

[thw0rted]

I know this hasn't had any activity in ages, but I noticed that the relevant MDN page had incorrect information on it, saying that null is only returned in the case of an invalid contextType argument. Per the living standard, @mhegazy is correct and null should be returned any time you request a different context type than the first mode requested.

I already put an edit into the MDN page, flagged for technical review (I'm just some guy, you know?) but it sounds to me like this issue can be closed. Basically, the compiler can't know ahead of time if a given call will return null, but you as developer could know that e.g. a given canvas element will only ever be set to 2d context mode, so your call should never return null. In that case, a non-null assertion would make sense.

[ybigus]

a given canvas element will only ever be set to 2d context mode, so your call should never return null. In that case, a non-null assertion would make sense.

In theory yes, in reality, it can return null... Here is an example:

We are also experiencing this bug in the same way. After hundreds (or thousands) of small canvas elements being created and successfully drawn to with a 2d context, at some point it just gives up and returns null for the context. In our case we were able to switch to HTMLImageElements and then no problem, which shows that the memory budget doesn't have to be so small. These regression bugs are really frustrating for developers.
Source: https://bugs.webkit.org/show_bug.cgi?id=195325

I just got a similar issue in my project :)

[mekantor]

I did this and it is enough to suppress the error in vscode:
let context = canvasElement.getContext('2d') || new CanvasRenderingContext2D();

[snarbies]

That just throws a confusing error if the canvas can not produce a CanvasRenderingContext2D. Better off keeping it simple and idiomatic and getting a more helpful error if for some reason you can't acquire the context. (mentioned above)

// Use the ! operator to assure TypeScript that
// the value is not null or undefined
let context = canvasElement.getContext('2d')!;

[dvsmc]

Why is this still open? The type CanvasRenderingContext2D | null is correct and using ! is definitely not a solution. You are ignoring potential errors from rendering context.

For example:

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
ctx.fillRect(...);

Open your app on mac Safari 14 or 15 and you will see nice errors in your console. Safari sometimes can't create canvas element and immediately return its context, it will return null. So your drawing calls will fail and you have to add some check (usually on next tick getting ctx will succeed):

if (!ctx) {
  return;
}

And that's just only one example (usually its a bit more complex, this was just simple out of context code) I can think on top of my head! And as mentioned in previous replies - there can be even more different cases of weird devices, rendering support etc.

[snarbies]

You misunderstood my comment. The reason the API is typed the way it is and the correct way to handle the situation was already established early in the thread.

I'm not suggesting that ignoring the possibility of null is the "correct" solution. I'm suggesting that if you want to ignore the possibility of null, let context = canvasElement.getContext('2d') || new CanvasRenderingContext2D(); is not the correct way to do it, ! is.

Creating a new rendering context will still fail, but in a more confusing way whereas ! will fail in a way that is very easy to trace back to the problem.

[thw0rted]

! will fail in a way that is very easy to trace back to the problem.

I'm not sure that willfully overriding type safety makes it "easy" to trace the problem. Experienced devs might look at

const ctx = myCanvas.getContext("2d")!; // Definitely not null, trust me
ctx.fillRect(...); // why did this explode??

with a skeptical eye, but plenty of people would take that at face value. Safer to do

const ctx = myCanvas.getContext("2d");
if (!ctx) { throw new Error("Failed to get context"); } // Should never happen

One extra line of code (two if you count adding /* istanbul ignore if */) and you'll always know exactly what failed and where.

[snarbies]

I'm not suggesting that ignoring the possibility of null is the "correct" solution. I'm suggesting that if you want to ignore the possibility of null...

The original question has been asked and answered. I think this horse is dead enough.