есть вот такая задача:
Создайте базовый класс 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.
Помогите разобраться пожалуйста
