add zooming and panning

1 files changed, 12 insertions, 5 deletions

diff --git a/src/main.js b/src/main.js
index 40c3f83..5c9b085 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,15 +6,22 @@ window.onload = () => {
 	const canvas = new Canvas('root');
 
 	const pos = canvas.mousePos;
-	canvas.onmousemove = () => canvas.draw();
+	canvas.onMouseMove = () => canvas.draw();
 	
-	canvas.ondraw = ct => {
-		ct.fillRect(0, 0, 0.5, 0.5);
+	canvas.onDraw = ct => {
+		ct.fillStyle = '#f00';
+		ct.fillRect(0, 0, 1/3, 1/3);
+		ct.fillStyle = '#0f0';
+		ct.fillRect(2/3, 0, 1/3, 1/3);
+		ct.fillStyle = '#ff0';
+		ct.fillRect(0, 2/3, 1/3, 1/3);
+		ct.fillStyle = '#00f';
+		ct.fillRect(2/3, 2/3, 1/3, 1/3);
 
 		ct.strokeStyle = '#fff';
-		ct.lineWidth = 0.001;
+		ct.lineWidth = 1/(canvas.zoom * canvas.scale);
 		ct.beginPath();
-		ct.arc(pos.x, pos.y, 0.1, 0, 2*Math.PI);
+		ct.arc(pos.x, pos.y, 30 /(canvas.zoom * canvas.scale), 0, 2*Math.PI);
 		ct.closePath();
 		ct.stroke();
 	};