Support viewport resizing (#16)

src/sketch.js

@@ -1,17 +1,21 @@
-
 import {noop} from './utils.js';
 
 export default class Sketch {
-	constructor(settings) {
+	constructor (settings) {
 		this.lastNow = null;
 
-		['getContext', 'onResize', 'render'].map(method => this[method] = this[method].bind(this));
+		[
+			'getContext',
+			'onResize',
+			'render'
+		].map(method => this[method] = this[method].bind(this));
 
-		this.drawDelay = settings.drawDelay || 50;
 		this.draw = settings.draw || noop;
+		this.resize = settings.resize || noop;
+		this.drawDelay = settings.drawDelay || 50;
 		this.container = settings.element || document.body;
 
-		window.addEventListener('optimizedResize', this.onResize);
+		window.addEventListener('resize', this.onResize);
 
 		this.canvas = document.createElement('canvas');
 		this.canvas.width = this.container.offsetWidth;
@@ -24,13 +28,36 @@ export default class Sketch {
 		requestAnimationFrame(this.render);
 	}
 
-	getContext() { return this.context; }
-
-	onResize(event) {
-		console.log('sketch - onResize', arguments);
+	getContext () {
+		return this.context;
 	}
 
-	render(now) {
+	onResize (event) {
+		const width = this.container.offsetWidth;
+		const height = this.container.offsetHeight;
+
+		const oldWidth = this.canvas.width;
+		const oldHeight = this.canvas.height;
+
+		const deltaX = width - oldWidth;
+		const deltaY = height - oldHeight;
+
+		this.canvas.width = width;
+		this.canvas.height = height;
+
+		Object.assign(event, {
+			height, width,
+			oldHeight, oldWidth,
+			deltaX, deltaY,
+		});
+
+		this.resize(event);
+	}
+
+	render (now) {
+		this.canvas.width = this.container.offsetWidth;
+		this.canvas.height = this.container.offsetHeight;
+
 		this.context.now = now;
 		this.context.lastNow = this.lastNow;