[ts] Demo asset update, demos clean up.

spine-ts/webgl/demos/additiveblending.js

@@ -7,7 +7,7 @@ var additiveBlendingDemo = function(canvas, bgColor) {
 
 	var gl, renderer, input, assetManager;
 	var skeleton, state, bounds;
-	var timeKeeper, loadingScreen;
+	var timeKeeper;
 	var target = null;
 	var dragging = false;
 	var handle = new spine.Vector2();
@@ -27,7 +27,7 @@ var additiveBlendingDemo = function(canvas, bgColor) {
 
 	function init () {
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
-		gl = canvas.ctx.gl;
+		gl = canvas.context.gl;
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);

spine-ts/webgl/demos/clipping.js

@@ -8,7 +8,7 @@ var clippingDemo = function(canvas, bgColor) {
 
 	function init () {
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
-		gl = canvas.ctx.gl;
+		gl = canvas.context.gl;
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);

spine-ts/webgl/demos/hoverboard.js

@@ -6,7 +6,7 @@ var hoverboardDemo = function(canvas, bgColor) {
 
 	var gl, renderer, input, assetManager;
 	var skeleton, state, bounds;
-	var timeKeeper, loadingScreen;
+	var timeKeeper;
 	var target = null;
 	var hoverTargets = [];
 	var controlBones = ["hoverboard controller", "hip controller", "board target", "crosshair"];
@@ -17,7 +17,7 @@ var hoverboardDemo = function(canvas, bgColor) {
 
 	function init () {
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
-		gl = canvas.ctx.gl;
+		gl = canvas.context.gl;
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);

spine-ts/webgl/demos/imagechanges.js

@@ -3,7 +3,7 @@ var imageChangesDemo = function(canvas, bgColor) {
 
 	var canvas, gl, renderer, input, assetManager;
 	var skeleton, bounds;
-	var timeKeeper, loadingScreen;
+	var timeKeeper;
 	var skeletons = {};
 	var activeSkeleton = "Alien";
 	var playButton, timeLine, isPlaying = true;
@@ -12,7 +12,7 @@ var imageChangesDemo = function(canvas, bgColor) {
 
 	function init () {
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
-		gl = canvas.ctx.gl;
+		gl = canvas.context.gl;
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);

spine-ts/webgl/demos/meshes.js

@@ -1,7 +1,7 @@
 var meshesDemo = function(canvas, bgColor) {
 	var canvas, gl, renderer, input, assetManager;
 	var skeleton, bounds;
-	var timeKeeper, loadingScreen;
+	var timeKeeper;
 	var skeletons = {};
 	var activeSkeleton = "Orange Girl";
 	var playButton, timeline, isPlaying = true;
@@ -10,7 +10,7 @@ var meshesDemo = function(canvas, bgColor) {
 
 	function init () {
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
-		gl = canvas.ctx.gl;
+		gl = canvas.context.gl;
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 		renderer.skeletonDebugRenderer.drawRegionAttachments = false;
 		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);

spine-ts/webgl/demos/skins.js

@@ -1,7 +1,7 @@
 var skinsDemo = function(canvas, bgColor) {
 	var canvas, gl, renderer, input, assetManager;
 	var skeleton, state, offset, bounds;
-	var timeKeeper, loadingScreen;
+	var timeKeeper;
 	var playButton, timeLine, isPlaying = true, playTime = 0;
 	var randomizeSkins, lastSkinChange = Date.now() / 1000, clickAnim = 0;
 
@@ -9,7 +9,7 @@ var skinsDemo = function(canvas, bgColor) {
 
 	function init () {
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
-		gl = canvas.ctx.gl;
+		gl = canvas.context.gl;
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);

spine-ts/webgl/demos/spritesheets.js

@@ -8,14 +8,14 @@ var spritesheetsDemo = function(canvas, bgColor) {
 	var skeletonAtlas;
 	var viewportWidth, viewportHeight;
 	var frames = [], currFrame = 0, frameTime = 0, frameScale = 0, FPS = 30;
-	var timeKeeper, loadingScreen, input;
+	var timeKeeper, input;
 	var playTime = 0, framePlaytime = 0, clickAnim = 0;
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	function init () {
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
-		gl = canvas.ctx.gl;
+		gl = canvas.context.gl;
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);

spine-ts/webgl/demos/stretchyman.js

@@ -6,7 +6,7 @@ var stretchymanDemo = function(canvas, bgColor) {
 
 	var canvas, gl, renderer, input, assetManager;
 	var skeleton, bounds, state;
-	var timeKeeper, loadingScreen;
+	var timeKeeper;
 	var target = null;
 	var hoverTargets = [];
 	var controlBones = [
@@ -25,7 +25,7 @@ var stretchymanDemo = function(canvas, bgColor) {
 
 	function init () {
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
-		gl = canvas.ctx.gl;
+		gl = canvas.context.gl;
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);

spine-ts/webgl/demos/tank.js

@@ -8,7 +8,7 @@ var tankDemo = function(canvas, bgColor) {
 
 	function init () {
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
-		gl = canvas.ctx.gl;
+		gl = canvas.context.gl;
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);

spine-ts/webgl/demos/transforms.js

@@ -19,7 +19,7 @@ var transformsDemo = function(canvas, bgColor) {
 
 	function init () {
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
-		gl = canvas.ctx.gl;
+		gl = canvas.context.gl;
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);

spine-ts/webgl/demos/transitions.js

@@ -14,7 +14,7 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
 		timeSliderLabel = $("#transitions-timeslider-label")[0];
 
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
-		gl = canvas.ctx.gl;
+		gl = canvas.context.gl;
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);

spine-ts/webgl/demos/utils.js

@@ -44,30 +44,22 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
 	}
 
 	function renderDemo(demo) {
-		var canvas = demo.canvas;
-		if (!demo.assetManager.isLoadingComplete()) {
-			if (demo.visible) {
-				if (canvas.parentElement != demo.placeholder) {
-					$(canvas).detach();
-					demo.placeholder.appendChild(canvas);
-				}
-				demo.loadingScreen.draw();
-			}
-		} else {
-			if (!demo.loaded) {
-				demo.loadingComplete();
-				demo.loaded = true;
+		if (demo.visible) {
+			var canvas = demo.canvas;
+			if (canvas.parentElement != demo.placeholder) {
+				$(canvas).detach();
+				demo.placeholder.appendChild(canvas);
 			}
-
-			if (demo.visible) {
-				if (canvas.parentElement != demo.placeholder) {
-					$(canvas).detach();
-					demo.placeholder.appendChild(canvas);
+			let complete = demo.assetManager.isLoadingComplete();
+			if (complete) {
+				if (!demo.loaded) {
+					demo.loaded = true;
+					demo.loadingComplete();
 				}
-				if (spineDemos.log) console.log("Rendering " + canvas.id);
+				if (spineDemos.log) console.log("Rendering: " + canvas.id);
 				demo.render();
-				demo.loadingScreen.draw(true);
 			}
+			demo.loadingScreen.draw(complete);
 		}
 	}
 
@@ -85,7 +77,7 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
 		for (var i = 0; i < numCanvases; i++) {
 			var canvas = document.createElement("canvas");
 			canvas.width = 1; canvas.height = 1;
-			canvas.ctx = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false });
+			canvas.context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false });
 			canvas.id = "canvas-" + i;		
 			spineDemos.canvases.push(canvas);
 		}
@@ -107,7 +99,7 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
 		demo.placeholder = placeholder;
 		demo.canvas = canvas;
 		demo.visible = false;
-		var renderer = new spine.webgl.SceneRenderer(canvas, canvas.ctx.gl);
+		var renderer = new spine.webgl.SceneRenderer(canvas, canvas.context.gl);
 		demo.loadingScreen = new spine.webgl.LoadingScreen(renderer);
 		$(window).on('DOMContentLoaded load resize scroll', function() {
 			checkElementVisible(demo);

spine-ts/webgl/demos/vine.js

@@ -17,7 +17,7 @@ var vineDemo = function(canvas, bgColor) {
 
 	function init () {
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
-		gl = canvas.ctx.gl;
+		gl = canvas.context.gl;
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 		input = new spine.webgl.Input(canvas);