handle changes of board size

src/tessellate.js

@@ -90,6 +90,7 @@ export class Tessellate {
 			'getTilePoints',
 			'draw',
 			'resize',
+			'remap',
 		].map(method => {this[method] = this[method].bind(this)});
 
 		this.checkSettings(settings);
@@ -111,10 +112,14 @@ export class Tessellate {
 		}, funky.pick(this.settings, ['desktopPress', 'moveThreshold', 'doubletapThreshold', 'pressThreshold', 'wheelFactor'])));
 
 		const cartographer = selectCartographer(this.settings.board, this.settings.orientation);
-		this.cartographer = new cartographer(Object.assign({
-			canvasWidth: this.sketch.getContext().canvas.width,
-			canvasHeight: this.sketch.getContext().canvas.height,
-		}, funky.pick(this.settings, ['centerX', 'centerY', 'height', 'width', 'scale', 'negativeTiles'])));
+		this.cartographer = new cartographer(Object.assign(this.sketch.getSize(), funky.pick(this.settings, [
+			'centerX',
+			'centerY',
+			'height',
+			'width',
+			'scale',
+			'negativeTiles',
+		])));
 	}
 
 	checkSettings (settings) {
@@ -262,4 +267,11 @@ export class Tessellate {
 
 		this.move(moveForScale);
 	}
+
+	remap ({height, width}) {
+		this.cartographer.remap(Object.assign({
+			height,
+			width,
+		}, this.sketch.getSize()));
+	}
 }