add #background directive

README.md

@@ -121,6 +121,7 @@ This is how the Decorator pattern looks like in nomnoml syntax:
     #gutter: 5
     #edgeMargin: 0
     #edges: hard | rounded
+    #background: transparent
     #fill: #eee8d5; #fdf6e3
     #fillArrows: false
     #font: Calibri

dist/nomnoml.js

@@ -319,6 +319,7 @@ var nomnoml;
                 edgeMargin: (+d.edgeMargin) || 0,
                 edges: d.edges == 'hard' ? 'hard' : 'rounded',
                 fill: (d.fill || '#eee8d5;#fdf6e3;#eee8d5;#fdf6e3').split(';'),
+                background: d.background || 'transparent',
                 fillArrows: d.fillArrows === 'true',
                 font: d.font || 'Calibri',
                 fontSize: (+d.fontSize) || 12,
@@ -582,14 +583,22 @@ var nomnoml;
             if (config.lineWidth % 2 === 1)
                 g.translate(0.5, 0.5);
         }
-        g.clear();
-        setFont(config, 'bold');
+        function setBackground() {
+            g.clear();
+            g.save();
+            g.strokeStyle('transparent');
+            g.fillStyle(config.background);
+            g.rect(0, 0, compartment.width, compartment.height).fill();
+            g.restore;
+        }
         g.save();
+        g.scale(config.zoom, config.zoom);
+        setBackground();
+        setFont(config, 'bold');
         g.lineWidth(config.lineWidth);
         g.lineJoin('round');
         g.lineCap('round');
         g.strokeStyle(config.stroke);
-        g.scale(config.zoom, config.zoom);
         snapToPixels();
         renderCompartment(compartment, nomnoml.buildStyle({ stroke: undefined }), 0);
         g.restore();
@@ -641,11 +650,6 @@ var nomnoml;
                     return chainable;
                 }
             };
-            function color255(r, g, b, a) {
-                var optionalAlpha = a === undefined ? 1 : a;
-                var comps = [Math.floor(r), Math.floor(g), Math.floor(b), optionalAlpha];
-                return 'rgba(' + comps.join() + ')';
-            }
             function tracePath(path, offset, s) {
                 s = s === undefined ? 1 : s;
                 offset = offset || { x: 0, y: 0 };
@@ -659,10 +663,6 @@ var nomnoml;
                 mousePos: function () { return mousePos; },
                 width: function () { return canvas.width; },
                 height: function () { return canvas.height; },
-                background: function (r, g, b) {
-                    ctx.fillStyle = color255(r, g, b);
-                    ctx.fillRect(0, 0, canvas.width, canvas.height);
-                },
                 clear: function () {
                     ctx.clearRect(0, 0, canvas.width, canvas.height);
                 },
@@ -826,7 +826,6 @@ var nomnoml;
             return {
                 width: function () { return 0; },
                 height: function () { return 0; },
-                background: function () { },
                 clear: function () { },
                 circle: function (p, r) {
                     var element = Element('circle', { r: r, cx: tX(p.x), cy: tY(p.y) });

index.html

@@ -67,6 +67,7 @@ <h2>Directives</h2>
 				#gutter: 5<br>
 				#edgeMargin: 0<br>
 				#edges: hard | rounded<br>
+				#background: transparent<br>
 				#fill: #eee8d5; #fdf6e3<br>
 				#fillArrows: false<br>
 				#font: Calibri<br>

src/Graphics.ts

@@ -12,7 +12,6 @@ interface Chainable {
 interface Graphics {
   width(): number
   height(): number
-  background(r: number, g: number, b: number): void
   clear(): void
   circle(center: Vec, r: number): Chainable
   ellipse(center: Vec, w: number, h: number, start?: number, stop?: number): Chainable

src/domain.ts

@@ -9,6 +9,7 @@ interface Config {
   gutter: number
   styles: { [key: string]: Style }
   fill: string[]
+  background: string
   edges: string
   edgeMargin: number
   spacing: number

src/parser.ts

@@ -95,6 +95,7 @@ namespace nomnoml {
 				edgeMargin: (+d.edgeMargin) || 0,
 				edges: d.edges == 'hard' ? 'hard' : 'rounded',
 				fill: (d.fill || '#eee8d5;#fdf6e3;#eee8d5;#fdf6e3').split(';'),
+				background: d.background || 'transparent',
 				fillArrows: d.fillArrows === 'true',
 				font: d.font || 'Calibri',
 				fontSize: (+d.fontSize) || 12,

src/renderer.ts

@@ -194,15 +194,24 @@ namespace nomnoml {
 			if (config.lineWidth % 2 === 1)
 				g.translate(0.5, 0.5)
 		}
+
+		function setBackground() {
+			g.clear()
+			g.save()
+			g.strokeStyle('transparent')
+			g.fillStyle(config.background)
+			g.rect(0, 0, compartment.width, compartment.height).fill()
+			g.restore
+		}
 
-		g.clear()
-		setFont(config, 'bold')
 		g.save()
+		g.scale(config.zoom, config.zoom)
+		setBackground()
+		setFont(config, 'bold')
 		g.lineWidth(config.lineWidth)
 		g.lineJoin('round')
 		g.lineCap('round')
 		g.strokeStyle(config.stroke)
-		g.scale(config.zoom, config.zoom)
 		snapToPixels()
 		renderCompartment(compartment, buildStyle({ stroke: undefined }), 0)
 		g.restore()

src/skanaar.canvas.ts

@@ -48,12 +48,6 @@ namespace nomnoml.skanaar {
 			}
 		}
 
-		function color255(r: number, g: number, b: number, a?: number): string {
-			var optionalAlpha = a === undefined ? 1 : a
-			var comps = [Math.floor(r), Math.floor(g), Math.floor(b), optionalAlpha]
-			return 'rgba('+ comps.join() +')'
-		}
-
 		function tracePath(path: Vec[], offset?: Vec, s?: number){
 			s = s === undefined ? 1 : s
 			offset = offset || {x:0, y:0}
@@ -68,10 +62,6 @@ namespace nomnoml.skanaar {
 			mousePos: function (){ return mousePos },
 			width: function (){ return canvas.width },
 			height: function (){ return canvas.height },
-			background: function (r, g, b){
-				ctx.fillStyle = color255(r, g, b)
-				ctx.fillRect (0, 0, canvas.width, canvas.height)
-			},
 			clear: function (){
 				ctx.clearRect(0, 0, canvas.width, canvas.height)
 			},

src/skanaar.svg.ts

@@ -104,7 +104,6 @@ namespace nomnoml.skanaar {
 		return {
 			width: function (){ return 0 },
 			height: function (){ return 0 },
-			background: function (/*r, g, b*/){},
 			clear: function (){},
 			circle: function (p: Vec, r: number){
 				var element = Element('circle', {r: r, cx: tX(p.x), cy: tY(p.y)})