Почему-то не отрисовываются цвета:
function Figure(x, y, color) {
this.x = x;
this.y = y;
this.сolor = color;
};
function Line(x1, y1, x2, y2, color) {
Figure.call(this, x1, y1, color);
this.x2 = x2;
this.y2 = y2;
this.draw = function(ctx) {
// let ctx = document.getElementById('c1').getContext('2d');
ctx.beginPath();
ctx.moveTo(this.x, this.y);
ctx.lineTo(this.x2, this.y2);
ctx.strokeStyle = this.color;
ctx.stroke();
}
};
function Rect(x, y, width, height, color) {
Figure.call(this, x, y, color);
this.w = width;
this.h = height;
this.draw = function(ctx) {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.w, this.h);
}
};
function Circle(x, y, r, color) {
Figure.call(this, x, y, color);
this.rad = r;
this.draw = function(ctx) {
ctx.beginPath();
ctx.arc(this.x, this.y, this.rad, 0, 2 * Math.PI, true);
ctx.fillStyle = this.color;
ctx.fill();
}
};
var line = new Line(50, 50, 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
function Canvas() {
let canvasField = document.getElementById('c1');
this.ctx = canvasField.getContext('2d');
this.add = function(...args) {
for (let i = 0; i < args.length; i++) {
let ctx = this.ctx;
args[i].draw(this.ctx);
}
}
}
let drawArea = new Canvas();
drawArea.add(line, circle, rect);
#c1 {
width: 400px;
height: 200px;
border: 3px solid black;
margin: 5px;
background-image: url(../images/setka.png);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="css/all.css">
</head>
<body>
<сanvas id="c1" height="200px" width="400px">ooo</сanvas>
<script src="JS/script.js"></script>
</body>
</html>
Вот что я получаю:
А хотелось бы цветное! Что я делаю не так???