simple background colors

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();

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;

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,