From d9a89fdd0656011c10372366ec2a21dbb2cfd5a2 Mon Sep 17 00:00:00 2001
From: Christopher Willis-Ford <cwillisf@media.mit.edu>
Date: Thu, 19 May 2016 12:00:19 -0700
Subject: [PATCH] Support setting the stage background color

---
 build/demo.html |  2 +-
 src/Drawable.js | 14 ++++++++++++++
 src/index.js    | 15 ++++++++++++++-
 3 files changed, 29 insertions(+), 2 deletions(-)
diff --git a/build/demo.html b/build/demo.html
index a7231fb..a7af2ee 100644
--- a/build/demo.html
+++ b/build/demo.html
@@ -5,7 +5,7 @@
     <title>Scratch WebGL rendering demo</title>
 </head>
 <body>
-<canvas id="scratch-stage" width="10" height="10"></canvas>
+<canvas id="scratch-stage" width="10" height="10" style="border:1px dashed black;"></canvas>
 </body>
 <script src="render-webgl.js"></script>
 <script>
diff --git a/src/Drawable.js b/src/Drawable.js
index 2ad8383..781a7d8 100644
--- a/src/Drawable.js
+++ b/src/Drawable.js
@@ -77,6 +77,10 @@ Drawable._effectCoverter = {
     }
 };
 
+/**
+ * The name of each supported effect.
+ * @type {Array}
+ */
 Drawable.EFFECTS = Object.keys(Drawable._effectCoverter);
 
 /**
@@ -183,6 +187,11 @@ Drawable.prototype.setSkin = function (skin_md5ext) {
     }
 };
 
+/**
+ * Fetch the shader for this Drawable's set of active effects.
+ * Build the shader if necessary.
+ * @returns {module:twgl.ProgramInfo?} The shader's program info.
+ */
 Drawable.prototype.getShader = function () {
     var shader = Drawable._shaderCache[this._shaderIndex];
     if (!shader) {
@@ -192,6 +201,11 @@ Drawable.prototype.getShader = function () {
     return shader;
 };
 
+/**
+ * Build the shader for this Drawable's set of active effects.
+ * @returns {module:twgl.ProgramInfo?} The new shader's program info.
+ * @private
+ */
 Drawable.prototype._buildShader = function () {
     var defines = [];
     var numEffects = Drawable.EFFECTS.length;
diff --git a/src/index.js b/src/index.js
index 0b495ac..fa8e4d9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -35,6 +35,7 @@ function RenderWebGL(
 
     this._createGeometry();
 
+    this.setBackgroundColor(1, 1, 1, 1);
     this.setStageSize(
         xLeft || -240, xRight || 240, yBottom || -180, yTop || 180);
     this.resize(
@@ -53,6 +54,18 @@ util.inherits(RenderWebGL, EventEmitter);
 module.exports = RenderWebGL;
 if (typeof window !== 'undefined') window.RenderWebGL = module.exports;
 
+/**
+ * Set the background color for the stage. The stage will be cleared with this
+ * color each frame.
+ * @param {number} red The red component for the background.
+ * @param {number} green The green component for the background.
+ * @param {number} blue The blue component for the background.
+ * @param {number} alpha The alpha (transparency) component for the background.
+ */
+RenderWebGL.prototype.setBackgroundColor = function(red, green, blue, alpha) {
+    this._backgroundColor = [red, green, blue, alpha];
+};
+
 /**
  * Set logical size of the stage in Scratch units.
  * @param {number} xLeft The left edge's x-coordinate. Scratch 2 uses -240.
@@ -88,7 +101,7 @@ RenderWebGL.prototype.draw = function () {
     var gl = this._gl;
 
     gl.viewport(0, 0, gl.canvas.clientWidth, gl.canvas.clientHeight);
-    gl.clearColor(1, 0, 1, 1);
+    gl.clearColor.apply(gl, this._backgroundColor);
     gl.clear(gl.COLOR_BUFFER_BIT);
 
     gl.enable(gl.BLEND);
