CODEWITHSUNDEEP
javascripthtmlcanvas
patrick
patrick

Reputation: 16949

Create dynamic diagonal gradient using javascript for html5 canvas?

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");

Upvotes: 2

Views: 1193

Answers (2)

le_m
le_m

Reputation: 20228

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):

enter image description here

Upvotes: 4

Dallas
Dallas

Reputation: 21

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.

Upvotes: 1

Related Questions