TypeScript: problems with type system

var canvas = <HTMLCanvasElement> document.getElementById("mycanvas");var ctx = canvas.getContext("2d");

or using dynamic lookup with the any type (no typechecking):

var canvas : any = document.getElementById("mycanvas");var ctx = canvas.getContext("2d");

You can look at the different types in lib.d.ts.

const canvas =  document.getElementById('stage') as HTMLCanvasElement;

While other answers promote type assertions (that's what they are — TypeScript doesn't have type casts that actually change the type; they are merely a way of suppressing type checking errors), the intellectually honest way to approach your problem is to listen to the error messages.

In your case, there are 3 things that can go wrong:

• document.getElementById("mycanvas") might return null, because no node of that id is found (it might have been renamed, not injected to the document yet, someone might have tried running your function in an environment without access to DOM)
• document.getElementById("mycanvas") might return a reference to a DOM element, but this DOM element is not a HTMLCanvasElement
• document.getElementById("mycanvas") did return a valid HTMLElement, it is indeed an HTMLCanvasElement, but the CanvasRenderingContext2D is not supported by the browser.

Instead of telling the compiler to shut up (and possibly finding yourself in a situation where a useless error message like Cannot read property 'getContext' of null is thrown), I recommend taking control over your application boundaries.

Make sure the element contains a HTMLCanvasElement

const getCanvasElementById = (id: string): HTMLCanvasElement => {    const canvas = document.getElementById(id);    if (!(canvas instanceof HTMLCanvasElement)) {        throw new Error(`The element of id "${id}" is not a HTMLCanvasElement. Make sure a <canvas id="${id}""> element is present in the document.`);    }    return canvas;}

Make sure the rendering context is supported by the browser

const getCanvasRenderingContext2D = (canvas: HTMLCanvasElement): CanvasRenderingContext2D => {    const context = canvas.getContext('2d');    if (context === null) {        throw new Error('This browser does not support 2-dimensional canvas rendering contexts.');    }    return context;}

Usage:

const ctx: CanvasRenderingContext2D = getCanvasRenderingContext2D(getCanvasElementById('mycanvas'))ctx.fillStyle = "#00FF00";ctx.fillRect(0, 0, 100, 100);

See TypeScript Playground.