Не отрисовываются цвета в

Question

Почему-то не отрисовываются цвета:

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>

Вот что я получаю:

А хотелось бы цветное! Что я делаю не так???

Answer 1

Печатайте все латинским шрифтом.

function Figure(x, y, color) {
  this.x = x;
  this.y = y;
  //this.сolor = color; !!!
  this.color = 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>

  <Canvas id="c1" height="200px" width="400px">ooo</Canvas>
  <script src="JS/script.js"></script>
</body>

</html>

БЛОГ НА HUSL

Не отрисовываются цвета в

Ответы (1 шт):