drawing shapes on a canvas when the user clicks

src/tessellate.js

@@ -0,0 +1,62 @@
+
+import {random} from './utils.js';
+
+import OnTap from './onTap.js';
+import Point from './point.js';
+import Sketch from './sketch.js';
+
+import TileCircle from './tileCircle.js';
+import TileDiamond from './tileDiamond.js';
+import TileHex    from './tileHex.js';
+import TileSquare from './tileSquare.js';
+
+export default class Tessellate {
+	constructor(settings) {
+		['draw'].map(method => {this[method] = this[method].bind(this)});
+
+		this.element = document.querySelector(settings.element);
+
+		this.sketch = new Sketch({
+			element: this.element,
+			draw: this.draw
+		});
+
+		this.map = [];
+
+		this.onTap = new OnTap({
+			element: this.element,
+			click: (event) => {
+				let x = event.pageX;
+				let y = event.pageY;
+				let tiles = ['circle', 'diamond', 'hex', 'square'];
+				let styles = ['filled', 'outline'];
+				let scale = random(10, 50);
+
+				this.map.push({
+					tile: tiles[random(tiles.length-1)],
+					style: styles[random(styles.length-1)],
+					x,
+					y,
+					scale,
+					pointy: random(1) ? true : false,
+					color: `rgba(${ random(255) }, ${ random(255) }, ${ random(255) }, 0.5)`
+				});
+			}
+		});
+
+		this.circle  = new TileCircle({context: this.sketch.getContext()});
+		this.diamond = new TileDiamond({context: this.sketch.getContext()});
+		this.hex     = new TileHex({context: this.sketch.getContext()});
+		this.square  = new TileSquare({context: this.sketch.getContext()});
+	}
+
+	draw(context, now, lastTime) {
+		let canvas = context.canvas;
+		let width = canvas.width;
+		let height = canvas.height;
+
+		context.clearRect(0, 0, width, height);
+
+		this.map.forEach(cell => this[cell.tile][cell.style](cell));
+	}
+}