CODEWITHSUNDEEP
javascripthtml5-canvas
Leo Ye
Leo Ye

Reputation: 41

How to draw every line with same gradient in Javascript?

I want to draw multiple line with a same gradient, but in my code, the second stroke affects the first line. Does anyone know how to make it? Thank you very much.

function drawOnLoad() {
  var canvas = document.getElementById("mycvs");
  
  var str = canvas.getContext("2d")
  var str_gradient = str.createLinearGradient(7, 7, 300, 150);
  str_gradient.addColorStop(0, "yellow");
  str_gradient.addColorStop(0.5, "blue");
  str_gradient.addColorStop(1, "red");
  str.strokeStyle = str_gradient;
  str.lineWidth = "7"
  str.beginPath()
  str.moveTo(7, 7)
  str.lineTo(300, 150)
  str.stroke()

  var str2 = canvas.getContext("2d");
  var str2_gradient = str2.createLinearGradient(300, 150, 400, 250)
  str2_gradient.addColorStop(0, "yellow")
  str2_gradient.addColorStop(0.5, "blue")
  str2_gradient.addColorStop(1, "red")
  str2.strokeStyle = str2_gradient
  str2.moveTo(300, 150)
  str2.lineTo(400, 250)
  str2.stroke()
}
<body onload="drawOnLoad()">
  <canvas id="mycvs" height="1240" width="1240"></canvas>
</body>

The way the second line affects the first is more obvious if you delay drawing the second line:

function drawOnLoad() {
  var canvas = document.getElementById("mycvs");
  
  var str = canvas.getContext("2d")
  var str_gradient = str.createLinearGradient(7, 7, 300, 150);
  str_gradient.addColorStop(0, "yellow");
  str_gradient.addColorStop(0.5, "blue");
  str_gradient.addColorStop(1, "red");
  str.strokeStyle = str_gradient;
  str.lineWidth = "7"
  str.beginPath()
  str.moveTo(7, 7)
  str.lineTo(300, 150)
  str.stroke()

  setTimeout(() => {
    var str2 = canvas.getContext("2d");
    var str2_gradient = str2.createLinearGradient(300, 150, 400, 250)
    str2_gradient.addColorStop(0, "yellow")
    str2_gradient.addColorStop(0.5, "blue")
    str2_gradient.addColorStop(1, "red")
    str2.strokeStyle = str2_gradient
    str2.moveTo(300, 150)
    str2.lineTo(400, 250)
    str2.stroke()
  }, 800);
}
<body onload="drawOnLoad()">
  <canvas id="mycvs" height="1240" width="1240"></canvas>
</body>

Upvotes: 4

Views: 59

Answers (1)

Peter B
Peter B

Reputation: 24147

You forgot to make a call to str2.beginPath().

The explanation is that what you call str and str2 are in fact both the same internal object (graphics context), as shown by the edited snippet below (last line that I added).

As a result, what you do to str2 may influence what you did to the graphics context when you were still calling it str.

function drawOnLoad() {
  var canvas = document.getElementById("mycvs");
  
  var str = canvas.getContext("2d")
  var str_gradient = str.createLinearGradient(7, 7, 300, 150);
  str_gradient.addColorStop(0, "yellow");
  str_gradient.addColorStop(0.5, "blue");
  str_gradient.addColorStop(1, "red");
  str.strokeStyle = str_gradient;
  str.lineWidth = "7"
  str.beginPath()
  str.moveTo(7, 7)
  str.lineTo(300, 150)
  str.stroke()

  var str2 = canvas.getContext("2d");
  var str2_gradient = str2.createLinearGradient(300, 150, 400, 250)
  str2_gradient.addColorStop(0, "yellow")
  str2_gradient.addColorStop(0.5, "blue")
  str2_gradient.addColorStop(1, "red")
  str2.beginPath()
  str2.strokeStyle = str2_gradient
  str2.moveTo(300, 150)
  str2.lineTo(400, 250)
  str2.stroke()
  
  console.log('str2 === str is ' + (str2 === str));
}
<body onload="drawOnLoad()">
  <canvas id="mycvs" height="1240" width="1240"></canvas>
</body>

Upvotes: 3

Related Questions