// ООП в функциональном стиле
// Оценочное время выподнения 8 ч
// Реальное время 6+ ч

var $canv = $('<canvas id="canvas" width="1024px" height="1024px"></canvas>');
$($canv).css({
	display: 'flex',
	'justify-content': 'center',
	margin: '0 auto'
}).prependTo('body');

function Figure(x, y, color) {
	this.x = x;
	this.y = x;
	this.color = color;
}

function Line(x, y, x2, y2, color) {
	Figure.call(this);
 	this.x = x;
	this.y = y;
	this.x2 = x2;
	this.y2 = y2;
	this.color = color;

 	this.drow = function() {
		var line = canvas.getContext("2d");
		line.beginPath();
		line.moveTo(this.x, this.y);
		line.lineTo(this.x2, this.y2);
		line.strokeStyle = this.color;
		line.stroke();
 	}
}

function Rect(x, y, width, height, color) {
	Figure.call(this);
	this.x = x;
	this.y = y;
	this.width = width;
	this.height = height;
	this.color = color;

 	this.drow = function() {
 		var rect = canvas.getContext('2d');
		rect.beginPath();
		rect.rect(this.x, this.y, this.width, this.height);
		rect.strokeStyle = this.color;
		rect.stroke();
 	}
}

function Circle(x, y, r, color) {
	Figure.call(this);
	this.x = x;
	this.y = y;
	this.r = r;
	this.color = color;

 	this.drow = function() {
 		var cirle = canvas.getContext('2d');
    	var centerX = this.x;
    	var centerY = this.y;
    	var radius = this.r;
    	cirle.beginPath();
     	cirle.arc(centerX, centerY, radius, 0, 2 * Math.PI);
    	cirle.strokeStyle = this.color;
    	cirle.stroke();
 	}
}

var line = new Line(21, 43, 210, 250, 'red');
var rect = new Rect(260, 130, 60, 120, 'green');
var circle = new Circle(190, 120, 50, 'blue');

function Canvac() {
	this.add = function(){
 		for (var i = 0; i < arguments.length; i++) {
 			var canvas = document.getElementById('canvas');
        	arguments[i].drow();
    	}
	}
}

var drowArea = new Canvac();
drowArea.add(line, circle);
drowArea.add(rect);