Uncaught ReferenceError: рисование не определяется при кодировании для Chrome

Question

На самом деле, я не могу понять, почему ничья не определена.То есть я сделал первый код, он не работал, поэтому я подумал, что, должно быть, допустил ошибки.Итак, я взял учебник по Интернету и та же проблема, рисование не определено. Затем я взял пример кода с треугольником, который перемещается непосредственно в приложение, и поместил его в новый белый файл, и даже ошибка рисования не определяется, пока вфайл примера, конечно, работает отлично.

Это код, который я взял в учебнике, он позволяет нарисовать линию!

function Line(x0, y0, x1, y1, color) {
  this.x0 = x0;
  this.y0 = y0;
  this.x1 = x1;
  this.y1 = y1;
  this.color = color;
  this.draw = function() {
    draw.line(this.x0, this.y0, this.x1, this.y1, this.color, 3);
  }
}

function randomInt(size) {
  return parseInt(Math.random() * size);
}

var line = new Line(randomInt(500), randomInt(500), 200, 200, 'green');
line.draw();

var x = 300;
var y = 300;

Answer 1

Я переписал метод draw ().

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let cw = canvas.width = 500,
  cx = cw / 2;
let ch = canvas.height = 500,
  cy = ch / 2;



function Line(x0, y0, x1, y1, color) {
  this.x0 = x0;
  this.y0 = y0;
  this.x1 = x1;
  this.y1 = y1;
  this.color = color;
  this.draw = function() {
    ctx.beginPath();
    ctx.strokeStyle = this.color;
    ctx.moveTo(this.x0, this.y0,)
    ctx.lineTo(this.x1, this.y1);
    ctx.stroke();
  }
}

function randomInt(size) {
  return parseInt(Math.random() * size);
}

var line = new Line(randomInt(500), randomInt(500), 200, 200, 'green');
line.draw();

canvas {
  border:1px solid
}

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