Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

add bgImage to configuration

  • Loading branch information...
commit 626a587d1d72165f194ca461bb8770fa8370259a 1 parent 009abde
Andy Skelton authored

Showing 1 changed file with 27 additions and 3 deletions. Show diff stats Hide diff stats

  1. 30  js/canvas.js
30  js/canvas.js
@@ -21,6 +21,7 @@
21 21
 
22 22
 	var defaults = {
23 23
 		bgFillColor : "#000000",
  24
+		bgImage : false,
24 25
 		debug : false,
25 26
 		debugSelector : "#debug",
26 27
 		baseHref : "",
@@ -127,7 +128,6 @@
127 128
 
128 129
 	function Fireworks(options) {
129 130
 		$.extend(this, defaults, options, vars); // Allow opts to override the defaults
130  
-		this.bgFillStyle = "rgba("+hexToRgb(this.bgFillColor)+",0.25)";
131 131
 		this.spotlightStyles = this.spotlightColors.map(function(c){return "rgba("+hexToRgb(c)+",0.2)"});
132 132
 		this.loadSprites(); // blocks animation while loading sprites
133 133
 	};
@@ -141,6 +141,29 @@
141 141
 		this.h2 = this.displayCanvas.height / 2;
142 142
 		this.displayContext = this.displayCanvas.getContext("2d");
143 143
 
  144
+		// This canvas holds the background.
  145
+		this.bgCanvas = document.createElement("canvas");
  146
+		this.bgCanvas.width = this.displayCanvas.width;
  147
+		this.bgCanvas.height = this.displayCanvas.height;
  148
+		this.bgContext = this.bgCanvas.getContext("2d");
  149
+		if ( this.bgFillColor ) {
  150
+			this.bgContext.fillStyle = "rgba("+hexToRgb(this.bgFillColor)+",1)";
  151
+			this.bgContext.fillRect(0, 0, this.bgCanvas.width, this.bgCanvas.height);
  152
+		}
  153
+		if ( this.bgImage ) {
  154
+			// Todo: stretch to fit
  155
+			var bg = new Image();
  156
+			++this.loading;
  157
+			var self = this;
  158
+			bg.onload = function() {
  159
+				--self.loading;
  160
+				self.bgContext.drawImage(bg, 0, 0, self.bgCanvas.width, self.bgCanvas.height);
  161
+				self.fadeFrame();
  162
+			};
  163
+			bg.src = this.applyBaseHref(this.bgImage);
  164
+		} else {
  165
+			this.fadeFrame();
  166
+		}
144 167
 /*
145 168
 		var self = this;
146 169
 		$(canvas).bind('mousedown.fireworks', function() {self.isMouseDown = true;});
@@ -733,8 +756,8 @@
733 756
 	Fireworks.prototype.fadeFrame = function() {
734 757
 		// Fade the previous frame
735 758
 		this.displayContext.globalCompositeOperation = "source-over";
736  
-		this.displayContext.fillStyle = this.bgFillStyle;
737  
-		this.displayContext.fillRect(0, 0, this.canvas.width, this.canvas.height);
  759
+		this.displayContext.globalAlpha = 0.4;
  760
+		this.displayContext.drawImage(this.bgCanvas, 0, 0, this.displayCanvas.width, this.displayCanvas.height);
738 761
 	};
739 762
 
740 763
 	Fireworks.prototype.nextFrame = function() {
@@ -753,6 +776,7 @@
753 776
 		this.fadeFrame();
754 777
 		// Add the next frame
755 778
 		this.displayContext.globalCompositeOperation = "lighter";
  779
+		this.displayContext.globalAlpha = 1;
756 780
 		this.displayContext.drawImage( this.frameCache.shift(), 0, 0 );
757 781
 		this.doStepCallback();
758 782
 		this.frameDueTime = time + this.frameInterval - Math.min(late, 10);

0 notes on commit 626a587

Please sign in to comment.
Something went wrong with that request. Please try again.