how can make white line go diagonal point point of 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);
by mathematics, , changing gradient coordinates. need set gradient coordinates describe line orthogonal 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 gradient is; above value merely gives values similar ones used in code above.
