How do I add support for browser features like WebGL to TypeScript?

Question

var canvas = <HTMLCanvasElement>document.getElementById('canvas1');
var gl = canvas.getContext('webgl');
canvas.width = 400;
canvas.height = 400;
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);

The "HTMLCanvasElement" only seems to offer 2d canvas methods. It won't let me compile gl.viewport() etc. How do I add this support for WebGL?

Answer 1

You need to define WebGL methods before you use them. You can find some community written WebGL typing here. Add the WebGL.d.ts to your project and call it like:

///<reference path="WebGL.d.ts" />

var canvas = <any>document.getElementById('canvas1');
var gl =  <WebGLRenderingContext> canvas.getContext('webgl');
canvas.width = 400;
canvas.height = 400;
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);