homework/JS_20.03.2018/script.js

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


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

	Circle.prototype.draw = function(par) {
		par.fillStyle = this.color;
		par.arc(this.x, this.y, this.r, 0, Math.PI*2, true);
		par.fill();
	};


	function Rect(x,y,w,h,color) {
		Figure.call(this,x,y,color);
		this.w = w;
		this.h = h;
	};

	Rect.prototype.draw = function(par) {
		par.fillStyle = this.color;
		par.fillRect(this.x, this.y, this.x+this.w, this.y+this.h);
	};
	

	function Line(x1,y1,x2,y2,color) {
		Figure.call(this,x1,y1,color);
		this.x2 = x2;
		this.y2 = y2;
	};

	Line.prototype.draw = function(par) {
		par.strokeStyle = this.color;
		par.moveTo(this.x,this.y);
		par.lineTo(this.x2,this.y2);	
		par.stroke();	   
	};


	function Canvas(id) {

		this.add = function(figure) {

			var canvas = document.getElementById(id),
				ctx = canvas.getContext("2d");

			figure.draw(ctx);
		};
	};



	//------------------//

	var line = new Line(25, 75, 275, 75, 'red'); // x1, y1, x2, y2, color
	var circle = new Circle(120, 100, 50, 'green'); // x, y, r, color
	var rect = new Rect(100, 30, 50, 100, 'blue'); // x, y, w, h, color

	var drawArea = new Canvas('canvasLine');
	drawArea.add(line);

	var drawArea = new Canvas('canvasCircle');
	drawArea.add(circle);

	var drawArea = new Canvas('canvasRect');
	drawArea.add(rect);