import Canvas from './Canvas.js';

const $ = id => document.getElementById(id)

window.onload = () => {
	const canvas = new Canvas('root');

	const pos = canvas.mouse.drawingPos;
	canvas.onMouseMove = () => canvas.draw();
	
	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 = canvas.pixelsToUnits(1);
		ct.beginPath();
		ct.arc(pos.x, pos.y, canvas.pixelsToUnits(30), 0, 2*Math.PI);
		ct.closePath();
		ct.stroke();
	};
	canvas.draw();
}