Tanya51,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="canvasID"></canvas>
<script>
'use strict'
function Figure(x1,y1,color){
this._x1=x1;
this._y1=y1;
this._color=color;
}
function Line(x1,y1,x2,y2,color){
Figure.apply(this,[x1,y1,color]);
this._x2=x2;
this._y2=y2;
}
Line.prototype.draw = function(ctx){
ctx.beginPath();
ctx.moveTo(this._x1, this._y1);
ctx.lineTo(this._x2, this._y2);
ctx.strokeStyle = this._color;
ctx.stroke();
}
function Canvas(sel){
var c=document.querySelector(sel)
this._ctx = c.getContext("2d");
c.height = 300;
c.width = 300;
};
Canvas.prototype.add = function(){
var ctx = this._ctx;
[].forEach.call(arguments, function(el) {
el.draw(ctx);
});
}
var drawArea = new Canvas('#canvasID');
var line = new Line(50, 50, 200, 200, 'red');
var line2 = new Line(250, 50, 70, 200, '#00FF00');
drawArea.add(line,line2);
</script>
</body>
</html>