Javascript Gradients

Javascript - Gradients

The code to create gradients is poorly documented - I created this page because I did not get what I expected.

These 2 commands produce slightly different gradients - based on the w3schools help, I had no idea why.

var grd = ctx.createLinearGradient(0, 0, 10, canvas.height-10);
var grd = ctx.createLinearGradient(0, 0,  0, canvas.height-10);

In a 200 pixel canvas, in order to set the top of the gradient to a specified color, the value had to be set twice. Without this, the top value is #F0F0F0 instead of #FFFFFF. (Chrome 49 on Windows XP)

  var grd = ctx.createLinearGradient(0, 0, 10, canvas.height-delta_x);
  grd.addColorStop(0, "white");
  grd.addColorStop(0.06, "white");// required to get white on top
  grd.addColorStop(1, "black");

  ctx.fillStyle = grd;
  ctx.fillRect(x, 0, delta_x, canvas.height-delta_x);

It was not immediately obvious that placing a 256 step gradient into a 200 pixel canvas might produce this problem.

Examples | Analysis | An additional source

Examples

In these examples, moving the mouse over the images will display the color.

1	2	3

	Decimal	Hex
r
g
b

White and black are not available - incorrectly had a width of 10
ctx.createLinearGradient(0, 0, 10, canvas.height-delta_x);
Adding a margin with a value of '1' makes white and black available
ctx.createLinearGradient(0, margin, 0, canvas.height-delta_x-(2*margin));
Without the margin, an extra color stop was needed to get white
var grd = ctx.createLinearGradient(0, 0, 0, canvas.height-delta_x); grd.addColorStop(0, "white"); grd.addColorStop(0.06, "white");// required to get white

In this example, the gradient sets both the width and height.
The colors of the 2 corners are 0xFEFEFE and 0x030303.

  var ctx = canvas.getContext('2d');

  var grd = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
  grd.addColorStop(0, "white");
  grd.addColorStop(1, "black");

  ctx.fillStyle = grd;
  ctx.fillRect(0, 0, canvas.width, canvas.height);

In this example, the gradient sets both the width and height and gradient start point is (2,2) and the end point is six less than the canvas size.
The colors of the 2 corners are 0xFFFFFF and 0x000000 - exactly what is wanted.
When the starting point was (1,1) and the endpoint was only one or two less than the canvas size, the results were fairly poor.

  var ctx = canvas.getContext('2d');

  var grd = ctx.createLinearGradient(2, 2, canvas.width-6, canvas.height-6);
  grd.addColorStop(0, "white");
  grd.addColorStop(1, "black");

  ctx.fillStyle = grd;
  ctx.fillRect(0, 0, canvas.width, canvas.height);

// The following worked, but was not sufficiently useful - only one pixel was black
// ctx.createLinearGradient(1, 1, canvas.width-2, canvas.height-2);

Analysis

The biggest problem with gradients is that the w3schools help on them is close to worthless. createlineargradient takes 4 parameters - but there is no explanation as to what those mean. I have pieced the following together based mostly on trial and error.

context.createLinearGradient(x0, y0, x1, y1);

According to w3schools, those values specify the starting and ending points of the gradient. (I am not sure what that means!)

To have a horizontal gradient, both x0 and x1 should be the same (I use zero)
To have a vertical gradient, both y0 and y1 should be the same (I use zero)
It appears that the parameters apply to locations on the canvas
fillRect((x0, y0, width, height) only displays the gradient under that rectangle, it does not draw it starting at (x0, y0)
When both x1 & y1 are present, their use appears to be backwards - the lines have a slope of [(x1-x0)/(y1-y0)]

You can play with the linear gradient at w3schools.

Change the canvas to 300x300
Use ctx.fillRect(0, 0, 300, 300) to fill the entire canvas
Modify the createLinearGradient and fillRect properties to see how it actually works

An additional source

After figuring most of it out, I found that mozilla.org provides a pretty clear explanation of the gradient command and what the properties mean. Specifically, that page verified that

The 4 parameters specify 2 points using global coordinates
That the gradient coordinates are not relative to fillRect coordinates

It also added that fact that

The line between those points specifies the gradient length and direction

Author: Robert Clemenzi