CODEWITHSUNDEEP
javascriptcanvas
Sami Lafrance
Sami Lafrance

Reputation: 83

Uncaught ReferenceError: draw is not defined on coding for chrome

Actually, I can't understand why draw is not defined. That is to say, I made a first code, it didn't work, so I thought I must have made mistakes. So I took a tutorial on the internet and the same problem, draw is not defined.Then I took an example code with the triangle that moves on the application directly and put it in a new white file and even draw error is not defined while in the example file directly of course it works perfectly.

That's the code i took on the tutorial, it allows you to draw a line !

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;

Upvotes: 0

Views: 300

Answers (1)

enxaneta
enxaneta

Reputation: 33044

I've rewritten the method 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>

Upvotes: 2

Related Questions