// https://stackoverflow.com/a/29676404

context = document.getElementById("canvas").getContext("2d");
let defaultFillStyle = '#000';
let shapeDebug = true;
let shapeDebugColour = '#FF00FF';

class Shape extends Path2D{
	constructor(params){
		super();
		this.shape = params.shape || 'rectangle';
		this.name = params.name;
		this.x = params.x || 0;
		this.y = params.y || 0;
		this.width = params.width || 0;
		this.height = params.height || 0;
		this.fillStyle = params.fillStyle || "#FFFFFF";
		this.strokeStyle = params.strokeStyle || "#000000";
		this.lineWidth = params.lineWidth || 0;
	}
	draw(){
		//console.log('Draw Shape: '+this.name);
		//console.log('X: '+this.x+' Y: '+this.y);
		//console.log('W: '+this.width+' H: '+this.height);
		//console.log('');

		if (this.fillStyle) {
			context.fillStyle = this.fillStyle;
			if(this.shape == 'circle'){
				// X,Y,Radius, start, end
				context.beginPath();
				context.arc(this.x, this.y, this.width/2, 0, 2 * Math.PI);
				context.fill();
				context.closePath();
			}else if (this.shape == 'rectangle'){
				context.fillRect(this.x, this.y, this.width, this.height);
			}
			context.fillStyle = defaultFillStyle; // Reset back to default
		}
		if (this.strokeStyle && this.lineWidth || shapeDebug) {
			context.strokeStyle = this.strokeStyle;
			context.lineWidth = this.lineWidth;
			if(shapeDebug){
				context.strokeStyle = shapeDebugColour;
				context.lineWidth = 2;
			}
			if(this.shape == 'circle'){
				// X,Y,Radius, start, end
				context.beginPath();
				context.arc(this.x, this.y, this.width/2, 0, 2 * Math.PI);
				context.stroke();
				context.closePath();
			}else if (this.shape == 'rectangle'){
				context.strokeRect(this.x, this.y, this.width, this.height);
			}
			context.strokeStyle = defaultFillStyle;
		}
	}
}