mathdoodle · August 29, 2015 14:22
diff --git a/doodle.json b/doodle.json
 {
  "uuid": "8f482ee9-5870-4c78-b6e0-54e46563beab",
  "description": "WebGL 001 canvas",
  "dependencies": {
    "DomReady": "latest"
  }
 }
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
  <head>
    <style>
    /* STYLE-MARKER */
    </style>
    <!-- SCRIPTS-MARKER -->
    <script>
    // CODE-MARKER
    </script>
  </head>
  <body>
    <canvas id='my-canvas' width='400' height='300'></canvas>
  </body>
 </html>
diff --git a/script.ts b/script.ts
 DomReady.ready(main);

 function main() {
  
  var canvas = <HTMLCanvasElement>document.getElementById('my-canvas');
  
  var gl = initWebGL(canvas);
  
  gl.clearColor(1.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  
 }

 function initWebGL(canvas: HTMLCanvasElement): WebGLRenderingContext {
  var context: WebGLRenderingContext = null;
  
  try {
    // Try to grab the standard context. If it fails, fallback to experimental.
    context = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
  }
  catch(e) {
  }
  
  if (context) {
    return context;
  }
  else {
    throw new Error("Unable to initialize WebGL. Your browser may not support it.");
  }
 }
diff --git a/style.less b/style.less
 body { background-color: grey; }
 canvas { background-color: white;}
	<!doctype html>
	<html>
	<head>
	<style>
	/* STYLE-MARKER */
	</style>
	<!-- SCRIPTS-MARKER -->
	<script>
	// CODE-MARKER
	</script>
	</head>
	<body>
	<canvas id='my-canvas' width='400' height='300'></canvas>
	</body>
	</html>
	DomReady.ready(main);

	function main() {

	var canvas = <HTMLCanvasElement>document.getElementById('my-canvas');

	var gl = initWebGL(canvas);

	gl.clearColor(1.0, 0.0, 0.0, 1.0);
	gl.clear(gl.COLOR_BUFFER_BIT);

	}

	function initWebGL(canvas: HTMLCanvasElement): WebGLRenderingContext {
	var context: WebGLRenderingContext = null;

	try {
	// Try to grab the standard context. If it fails, fallback to experimental.
	context = canvas.getContext('webgl') \|\| canvas.getContext('experimental-webgl');
	}
	catch(e) {
	}

	if (context) {
	return context;
	}
	else {
	throw new Error("Unable to initialize WebGL. Your browser may not support it.");
	}
	}
	body { background-color: grey; }
	canvas { background-color: white;}