3

How can I make my white line go perfectly diagonal from point to point of my bottom rectangle?

https://jsfiddle.net/a7rs5qu5/ 

  <canvas id="canvas" width="300" height="300"></canvas>

_canvas = document.getElementById('canvas');
_stage = _canvas.getContext('2d');

_stage.fillStyle = "#00FF00";
_stage.fillRect(0, 0, 300, 200);

var gradient = _stage.createLinearGradient(0, 200, 300, 300);
gradient.addColorStop(0, "blue");
gradient.addColorStop(.5, "white");
gradient.addColorStop(1, "blue");

_stage.fillStyle = gradient;
_stage.fillRect(0, 200, 300, 300);
patrick
  • 16,091
  • 29
  • 100
  • 164

2 Answers2

6

By mathematics, and changing gradient coordinates. You need to set gradient coordinates so they describe a line orthogonal to it.

_canvas = document.getElementById('canvas');
_stage = _canvas.getContext('2d');

_stage.fillStyle = "#00FF00";
_stage.fillRect(0, 0, 300, 200);

var radius = 100;
var angle = Math.atan2(100, 300) + Math.PI / 2;
var gx = radius * Math.cos(angle);
var gy = radius * Math.sin(angle);
var cx = (0 + 300) / 2;
var cy = (200 + 300) / 2;

var gradient = _stage.createLinearGradient(cx - gx, cy - gy, cx + gx, cy + gy);
gradient.addColorStop(0, "blue");
gradient.addColorStop(.5, "white");
gradient.addColorStop(1, "blue");

_stage.fillStyle = gradient;
_stage.fillRect(0, 200, 300, 300);
<canvas id="canvas" width="300" height="300"></canvas>

The selection of radius controls how wide the gradient is; the above value merely gives values similar to the ones used in the code above.

Amadan
  • 191,408
  • 23
  • 240
  • 301
  • Ok, but no need to go 'round-about with trigonometry. No need for math of any kind: `createLinearGradient(0,_canvas.height,_canvas.width,200)` – markE Jun 07 '16 at 05:40
  • @markE: You have a point - exchanging coordinates is pretty close to rotation by 90 degrees. Takes math to see why, though. – Amadan Jun 07 '16 at 06:37
  • @Amadan can you check out my question which is quite similar → https://stackoverflow.com/questions/67346704/calculate-degrees-in-canvas-using-konva-with-react – deadcoder0904 May 02 '21 at 03:12
0

Here is a more generalized solution for the lazy.

    function createDiagonalGradient(startx, starty, endx, endy)
    {

    var height = endy - starty; 

    var radius = height; 

//-1 or 1 depending on which diagonal you want
    var angle = -1 * Math.atan2(height, endx) + Math.PI / 2;


    var gx = radius * Math.cos(angle);
    var gy = radius * Math.sin(angle);
    var cx = (startx + endx) / 2;
    var cy = (starty + endy) / 2;

    var gradient = _stage.createLinearGradient(cx - gx, cy - gy, cx + gx, cy + gy);
    gradient.addColorStop(0, "black");
    gradient.addColorStop(.5, "white");
    gradient.addColorStop(1, "black");

    return gradient; 


    }
patrick
  • 16,091
  • 29
  • 100
  • 164
  • can you check out my question which is quite similar → https://stackoverflow.com/questions/67346704/calculate-degrees-in-canvas-using-konva-with-react – deadcoder0904 May 02 '21 at 03:11