Capt. Horatio T.P. Webb
HTML 5 -- CANVAS EXAMPLE LINEAR AND RADIAL GRADIENTS

Parks -- Fall 2013

Methods:
Colors:

name_for_the_canvas_context.strokeStyle="value";

followed by:

name_for_the_canvas_context.strokeText("string",x,y);

Colors
"black" [default]
"any of 147 color names" (see this)
"#rrggbb" where rr,gg, and bb are hexadecinal internsities for red, green and blue -- 0→255
"rgb(rrr,ggg,bbb)" where rrr,ggg, and bbb are decimal intensities -- 0→100
"rgba(rrr,ggg,bbb,i.i)" where rrr,ggg, and bbb are decimal intensities
0→100 and opacity is 0.0→1.0 where 0.0 = transparent thru 1.0 = opaque
Linear Gradient:

First, create the linear gradient by:

var name_of_gradient = name_for_the_canvas_context.createLinearGradient(x1,y1,x2,y2);

Where the gradient path is:
x1 is the horizontal co-ordinate of the upper left-hand corner
y1 is the vertical co-ordinate of the upper left-hand corner
x2 is the horizontal co-ordinate of the lower right-hand corner
y2 is the vertical co-ordinate of the lower right-hand corner
name_of_gradient.addColorStop(offset, color); "offset" is where to start/stop the color ( 0 <= offset <= 1.0)
the first "offset" is normally 0.0
the last "offset" is normally 1.0
there may be more than two offets

color is any color

Radial Gradient:

First, create the radial gradient by:

var name_of_gradient = name_for_the_canvas_context.createRadialGradient(x1,y1,r1,x2,y2,r2);

Where:
x1 is the horizontal co-ordinate of the interior circle center
y1 is the vertical co-ordinate of the interior circle center
r1 is the circle radius
x2 is the horizontal co-ordinate of the outer circle center
y2 is the vertical co-ordinate of the outer circle center
r2 is the outer circle radius
name_of_gradient.addColorStop(offset, color); "offset" is where to start/stop the color ( 0 <= offset <= 1.0)
the first "offset" is normally 0.0
the last "offset" is normally 1.0
there may be more than two offets

color is any color

Here is a canvas:

<canvas id="grad_example" width="500" height="600""></canvas>

HTML 5 Canvas is NOT supported by this browser

Here is the code: 

var gradex = document.getElementById("grad_example");
var gradc = gradex.getContext("2d");

gradc.strokeText("from 10,60 to 110,60", 120,30);
gradc.strokeText("red to white",120,50);

gradc.strokeText("from 110,180 to 10,180", 120,150);
gradc.strokeText("red to white",120,170);

gradc.strokeText("from 10,250 to 110,350", 120,270);
gradc.strokeText("red to white",120,290);

gradc.strokeText("from 10,370 to 110,470", 120,390);
gradc.strokeText("white to red",120,410);


var gr1 = gradc.createLinearGradient(10,60,110,60);
gr1.addColorStop(0.0,"red");
gr1.addColorStop(1.0,"white");
gradc.fillStyle = gr1;
gradc.fillRect(10,10,100,100);

var gr2 = gradc.createLinearGradient(110,180,10,180);
gr2.addColorStop(0.0,"red");
gr2.addColorStop(1.0,"white");
gradc.fillStyle = gr2;
gradc.fillRect(10,130,100,100);

var gr3 = gradc.createLinearGradient(10,250,110,350);
gr3.addColorStop(0.0,"red");
gr3.addColorStop(1.0,"white");
gradc.fillStyle = gr3;
gradc.fillRect(10,250,100,100);

var gr4 = gradc.createLinearGradient(10,370,110,470);
gr4.addColorStop(0.0,"white");
gr4.addColorStop(1.0,"red");
gradc.fillStyle = gr4;
gradc.fillRect(10,370,100,100);

gradc.beginPath();
gradc.lineWidth="1";
gradc.strokeStyle="black";
gradc.moveTo(10,60);
gradc.lineTo(110,60);
gradc.lineTo(105,55);
gradc.moveTo(110,60);
gradc.lineTo(105,65);
gradc.stroke();
gradc.closePath();

gradc.beginPath();
gradc.lineWidth="1";
gradc.strokeStyle="black";
gradc.moveTo(110,180);
gradc.lineTo(10,180);
gradc.lineTo(15,175);
gradc.moveTo(10,180);
gradc.lineTo(15,185);
gradc.stroke();
gradc.closePath();

gradc.beginPath();
gradc.lineWidth="1";
gradc.strokeStyle="black";
gradc.moveTo(10,250);
gradc.lineTo(110,350);
gradc.lineTo(110,345);
gradc.moveTo(110,350);
gradc.lineTo(105,350);
gradc.stroke();
gradc.closePath();

gradc.beginPath();
gradc.lineWidth="1";
gradc.strokeStyle="black";
gradc.moveTo(10,370);
gradc.lineTo(110,470);
gradc.lineTo(110,465);
gradc.moveTo(110,470);
gradc.lineTo(105,470);
gradc.stroke();
gradc.closePath();

var r1 = gradc.createRadialGradient(300,60,0,300,60,50);
r1.addColorStop(0.0,"red");
r1.addColorStop(1.0,"blue");
gradc.fillStyle = r1;
gradc.fillRect(250,10,100,100);

var r2 = gradc.createRadialGradient(300,180,0,300,180,50);
r2.addColorStop(0.0,"white");
r2.addColorStop(1.0,"blue");
gradc.fillStyle = r2;
gradc.fillRect(250,130,100,100);

var r3 = gradc.createRadialGradient(300,300,0,300,300,50);
r3.addColorStop(0.0,"blue");
r3.addColorStop(0.5,"green");
r3.addColorStop(1.0,"blue");
gradc.fillStyle = r3;
gradc.fillRect(250,250,100,100);

var r4 = gradc.createRadialGradient(250,370,0,250,370,141);
r4.addColorStop(0.0,"blue");
r4.addColorStop(1.0,"green");
gradc.fillStyle = r4;
gradc.fillRect(250,370,100,100);

gradc.strokeText("300,60 with radius 50", 360,30);
gradc.strokeText("red to blue",360,50);

gradc.strokeText("300,180 with radius 50", 360,150);
gradc.strokeText("white to blue",360,170);

gradc.strokeText("300,300 with rdaius 50", 360,270);
gradc.strokeText("blue to green to blue",360,290);

gradc.strokeText("250,370 with radius 141", 360,390);
gradc.strokeText("blue to green",360,410);

gradc.beginPath();
gradc.lineWidth="1";
gradc.strokeStyle="white";
gradc.moveTo(300,60);
gradc.lineTo(350,60);
gradc.lineTo(345,55);
gradc.moveTo(350,60);
gradc.lineTo(345,65);
gradc.stroke();
gradc.closePath();

gradc.beginPath();
gradc.lineWidth="1";
gradc.strokeStyle="yellow";
gradc.moveTo(300,180);
gradc.lineTo(350,180);
gradc.lineTo(345,175);
gradc.moveTo(350,180);
gradc.lineTo(345,185);
gradc.stroke();
gradc.closePath();

gradc.beginPath();
gradc.lineWidth="1";
gradc.strokeStyle="white";
gradc.moveTo(300,300);
gradc.lineTo(350,300);
gradc.lineTo(345,295);
gradc.moveTo(350,300);
gradc.lineTo(345,305);
gradc.stroke();
gradc.closePath();

gradc.beginPath();
gradc.lineWidth="1";
gradc.strokeStyle="black";
gradc.moveTo(250,370);
gradc.lineTo(350,470);
gradc.lineTo(350,465);
gradc.moveTo(350,470);
gradc.lineTo(345,470);
gradc.stroke();
gradc.closePath();