From 3ded7cf4f0904e69616db4ef11f336f2c6f7d95f Mon Sep 17 00:00:00 2001
From: Gavin McDonald <gavinmcdoh@gmail.com>
Date: Fri, 31 Aug 2018 21:46:46 -0400
Subject: [PATCH] simple background colors

---
 src/main.js       |  6 ++++++
 src/sketch.js     | 13 +++++++++++--
 src/tessellate.js |  6 ++++--
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/main.js b/src/main.js
index 39dcd99..826e9f5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -187,6 +187,12 @@ class Demo {
 	}
 
 	draw({context, scale, tilePoints}) {
+		this.tessellate.background({
+			red: 64,
+			green: 32,
+			blue: 128,
+		});
+
 		tilePoints.forEach(tilePoint => this.drawTile(tilePoint, context, scale));
 
 		const now = Date.now();
diff --git a/src/sketch.js b/src/sketch.js
index 6e74b3b..dadb30c 100644
--- a/src/sketch.js
+++ b/src/sketch.js
@@ -1,4 +1,4 @@
-import {noop} from './utils.js';
+import {getColor, noop} from './utils.js';
 
 export default class Sketch {
 	constructor (settings) {
@@ -6,8 +6,9 @@ export default class Sketch {
 
 		[
 			'getContext',
+			'background',
 			'onResize',
-			'render'
+			'render',
 		].map(method => this[method] = this[method].bind(this));
 
 		this.draw = settings.draw || noop;
@@ -32,6 +33,14 @@ export default class Sketch {
 		return this.context;
 	}
 
+	background ({red, green, blue, alpha}) {
+		this.context.beginPath();
+		this.context.rect(0, 0, this.canvas.width, this.canvas.height);
+		this.context.fillStyle = getColor({red, green, blue, alpha});
+		this.context.closePath();
+		this.context.fill();
+	}
+
 	onResize (event) {
 		const width = this.container.offsetWidth;
 		const height = this.container.offsetHeight;
diff --git a/src/tessellate.js b/src/tessellate.js
index 3a2b7db..59cf1c6 100644
--- a/src/tessellate.js
+++ b/src/tessellate.js
@@ -212,13 +212,15 @@ export class Tessellate {
 		return funky.flatten(this.cartographer.boundingBox(upperLeft, upperRight, lowerLeft, lowerRight));
 	}
 
+	background (color) {
+		this.sketch.background(color);
+	}
+
 	draw (context) {
 		const canvas = context.canvas;
 		const width = canvas.width;
 		const height = canvas.height;
 
-		context.clearRect(0, 0, width, height);
-
 		this.settings.draw({
 			context,