[Tanya51]

есть вот такая задача:

Создайте базовый класс Figure, который будет хранить координаты (x, y) и цвет фигуры. На базе класса Figure создайте три класса – Line, Rect, Circle, каждый из которых создает соответствующую фигуру. Пример создания экземпляров каждого класса и параметры фигур:

var line = new Line(50, 250, 200, 200, 'red'); // x1, y1, x2, y2, color
var circle = new Circle(120, 120, 50, 'green'); // x, y, r, color
var rect = new Rect(260, 130, 60, 120, 'blue'); // x, y, w, h, color

Все три класса-наследника имеют метод draw для рисования фигуры с соответствующими параметрами (координаты, размеры, цвет).

Фигуры рисуются на Canvas. Для рисования на канвасе создайте еще один класс – Canvas, в котором инициализируется элемент <canvas> из DOM. В этом классе есть метод add, который и отображает созданные вами фигуры на странице. Обратите внимание, добавлять фигуры на канвас можно как по отдельности, так и списком.

var drawArea = new Canvas('canvasID');
drawArea.add(line);
drawArea.add(circle, rect);

<canvas id="canvasID"></canvas>



Мой JS

'use strict'
debugger;

function Figure(x1,y1,x2,y2,color){
	this._x1=x1;
	this._y1=y1;
	this._x2=x2;
	this._y2=y2;
	this._color=color;
}

function Line(x1,y1,x2,y2,color){
	Figure.apply(this,arguments);
	
	function draw (x1,y1,x2,y2,color){
		ctx.beginPath();
	ctx.moveTo(x1, y1);
	ctx.lineTo(x2, y2);
	ctx.strokeStyle = color;
	ctx.stroke();
	}
}

var line = new Line(50, 250, 200, 200, 'red');

function Canvas(){

	var c=document.getElementById("canvasID");
	var ctx=c.getContext("2d");
	c.height = 2000;
	c.width  = 2000;
	
	Canvas.prototype.add = function(){
		return $(arguments).appendTo('#canvasID')
	}
	
	
};
var drawArea = new Canvas('canvasID');
	drawArea.add(line);

у меня не получается сделать так,чтоб моя line рисовалась в теге Canvas.
Помогите разобраться пожалуйста