CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
Benjamin Kantor
Benjamin Kantor

Reputation: 83

Weird behavior with HTML Canvas Line Color

So I've been working on a JavaScript library for graphing functions in a canvas, and in the function to setup the graph I ran into some really weird behavior. In some places the ctx.strokeStyle is changed to draw in a different color, but for some reason every function is drawn using one color, which was only used at one point.

var chartCount = 0;
class chart {
  constructor(gnx, gx, gny, gy) {
    this.canvas = document.createElement("CANVAS");
    document.body.appendChild(this.canvas);
    this.canvas.width = 400;
    this.canvas.height = 400;
    this.canvas.style = "border:1px solid #000000;";
    this.ctx = this.canvas.getContext("2d");
    this.id = "htmlCanvasGraph#" + chartCount;
    chartCount++;
    this.gnx = gnx;
    this.gx = gx;
    this.gny = gny;
    this.gy = gy;
    this.ry = this.canvas.height / (this.gny + this.gy);
    this.rx = this.canvas.width / (this.gnx + this.gx);
    this.outline();
  }
  cx(x) { //convert a graph value to a canvas value
    return (x + this.gnx) * this.rx;
  }
  cy(y) { //convert a graph value to a canvas value
    return this.canvas.height - (y + this.gny) * this.ry;
  }
  outline() { //creates the axis and graph lines
    this.drawline(0 - this.gnx, this.gx, 0, 0, 3, "#000000"); //BLACK
    this.drawline(0, 0, 0 - this.gny, this.gy, 3, "#000000");
    var i = 0;
    while (i < this.gx) { //quadrants 1 and 4
      i += 10;
      this.drawline(i, i, this.gy, -1 * this.gny, 1, "#808080"); //GREY 
    } // FOR SOME REASON EVERY SINGLE LINE IS THAT ^ COLOR
  } //ALSO IF YOU LOOK CLOSELY OR CHANGE IT TO BLACK YOU CAN SEE THE  LINES SLIGHTLY FADE OUT AS MOVEING LEFT TO RIGHT, NO IDEA WHY
  drawline(x1, x2, y1, y2, w, c) {
    this.ctx.lineWidth = w;
    this.ctx.strokeStyle = c;
    this.ctx.moveTo(this.cx(x1), this.cy(y1));
    this.ctx.lineTo(this.cx(x2), this.cy(y2));
    this.ctx.stroke();
  }
}
const graph1 = new chart(100, 100, 100, 100)

Here is the whole script on JS Fiddle

you can see that every line is grey even though the two wider lines are supposed to be black.

Another problem is that is the grid lines are drawn left to right they become lighter and lighter for some reason, no idea what could be causing this since the width, color, and alpha should be the same between each line.

Upvotes: 1

Views: 135

Answers (1)

Helder Sepulveda
Helder Sepulveda

Reputation: 17664

You are just missing a beginPath in your draw...
Without that the color that is applied is the last one that is set

See corrected code below, now the output should look like:

enter image description here

class chart {
  constructor(gnx, gx, gny, gy) {
    this.canvas = document.createElement("CANVAS");
    document.body.appendChild(this.canvas);
    this.canvas.width = 200;
    this.canvas.height = 200;
    this.canvas.style = "border:1px solid #000000;";
    this.ctx = this.canvas.getContext("2d");
    this.gnx = gnx;
    this.gx = gx;
    this.gny = gny;
    this.gy = gy;
    this.ry = this.canvas.height / (this.gny + this.gy);
    this.rx = this.canvas.width / (this.gnx + this.gx);
    this.outline();
  }

  drawline(x1, x2, y1, y2, w, c) {
    this.ctx.beginPath()
    this.ctx.lineWidth = w;
    this.ctx.strokeStyle = c;
    this.ctx.moveTo(this.cx(x1), this.cy(y1));
    this.ctx.lineTo(this.cx(x2), this.cy(y2));
    this.ctx.stroke();
  }

  cx(x) { //convert a graph value to a canvas value
    return (x + this.gnx) * this.rx;
  }

  cy(y) { //convert a graph value to a canvas value
    return this.canvas.height - (y + this.gny) * this.ry;
  }

  outline() { //creates the axis and graph lines
    this.drawline(0 - this.gnx, this.gx, 0, 0, 3, "#000000"); //BLACK
    this.drawline(0, 0, 0 - this.gny, this.gy, 3, "#000000");
    var i = 0;
    while (i < this.gx) { //quadrants 1 and 4
      i += 10;
      this.drawline(i, i, this.gy, -1 * this.gny, 1, "#808080"); //GREY 
    }
  } 
}
const graph1 = new chart(100, 100, 100, 100)

Upvotes: 2

Related Questions