src/Canvas.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

class Canvas {
	constructor(parentElement) {
		this.element = document.createElement('canvas');
		this.context = this.element.getContext('2d');
		parentElement.appendChild(this.element);
		this.fillWindow();
		window.addEventListener('resize', () => this.fillWindow());
	}

	fillWindow() {
		const width = window.innerWidth;
		const height = window.innerHeight;
		const scale = Math.min(width, height);

		this.element.width = width; this.element.height = height;
		this.context.setTransform(0.4*scale, 0, 0, -0.4*scale, 0.5*scale, 0.5*scale);

		this.draw();
	}

	draw() {
		this.context.clearRect(-1, -1, 2, 2);
		if (this.onDraw) this.onDraw(this.context);
	}
}

export default Canvas;