Create dynamic diagonal gradient using javascript for html5 canvas?

Question

Is there a way to create a diagonal gradient doing something like this? My attempts only give me a vertical or horizontal

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

 var gradient = _stage.createLinearGradient(0, 0, buttonEndX, buttonEndY);
 gradient.addColorStop(0, "white");
 gradient.addColorStop(1, "blue");

Answer 1

Your code should work fine. Do you call context.fillRect() after previously setting context.fillStyle = gradient and are your buttonEndX and buttonEndY variables set to meaningful values?

 var buttonEndX = 100, buttonEndY = 100; _canvas = document.getElementById('canvas'); _stage = _canvas.getContext('2d'); var gradient = _stage.createLinearGradient(0, 0, buttonEndX, buttonEndY); gradient.addColorStop(0, "white"); gradient.addColorStop(1, "blue"); _stage.fillStyle = gradient; _stage.fillRect(10, 10, 200, 100); 

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

The above code renders as (Chrome 48):

Answer 2

You seem to have it correct, Patrick. This codepen shows an example of how the code you have should potentially render. Which brings up the question of what are your buttonEndX and buttonEndY values? Maybe try something as simple as a console.log(bottonEndX) to make sure that those values are what you expect them to be.