drawing shapes on a canvas when the user clicks

src/sketch.js

@@ -0,0 +1,37 @@
+
+export default class Sketch {
+	constructor(settings) {
+		this.lastTime = null;
+
+		['getContext', 'onResize', 'render'].map(method => this[method] = this[method].bind(this));
+
+		this.draw = settings.draw || function() {}; // () => {};
+		this.container = settings.element || document.body;
+
+		window.addEventListener('optimizedResize', this.onResize);
+
+		this.canvas = document.createElement('canvas');
+		this.canvas.width = this.container.offsetWidth;
+		this.canvas.height = this.container.offsetHeight;
+
+		this.context = this.canvas.getContext('2d');
+
+		this.container.appendChild(this.canvas);
+
+		requestAnimationFrame(this.render);
+	}
+
+	getContext() { return this.context; }
+
+	onResize(event) {
+		console.log('sketch - onResize', arguments);
+	}
+
+	render(now) {
+		this.draw(this.context, now, this.lastTime);
+
+		this.lastTime = now;
+		requestAnimationFrame(this.render);
+	}
+}
+