# How To Draw Gradient Colors In Html5 Canvas

### 1. Draw Gradient Color In Html5 Canvas Steps.

1. You can use the Html5 canvas object’s context’s method createLinearGradient(lgStartX, lgStartY, lgEndX, lgEndY) to create a linear gradient object.
`linearGradient = ctx.createLinearGradient(lgStartX, lgStartY, lgEndX, lgEndY);`
2. lgStartX: The linear gradient effect starting point’s x coordinate.
3.  lgStartY: The linear gradient effect starting point’s y coordinate.
4. lgEndX: The linear gradient effect ending point’s x coordinate.
5. lgEndY: The linear gradient effect ending point’s y coordinate.
6. Then call the linearGradient.addColorStop(offset, color) to set the color offset and value. The offset value range is 0 – 1.
`linearGradient.addColorStop(0, 'red');`
7. Now you should set the linearGradient object to the context object’s fillStyle attribute.
`ctx.fillStyle = linearGradient;`
8. Now you can draw the rectangle using the context object’s fillRect() method.
`ctx.fillRect(leftX, topY, width, height);`

`radialGradient = ctx.createRadialGradient(rgStartX, rgStartY, rgStartRadius, rgEndX, rgEndY, rgEndRadius);`
2. rgStartX: The center point’s x coordinate of the starting circle in the gradient.
3. rgStartY: The center point’s y coordinate of the starting circle in the gradient.
5. rgEndX: The center point’s x coordinate of the ending circle in the gradient.
6. rgEndY: The center point’s y coordinate of the ending circle in the gradient.
9. `radialGradient.addColorStop(0.5, 'yellow');`
10. Set the above radialGradient object to the context object’s fillStyle attribute.
`ctx.fillStyle = radialGradient;`
11. Then you can call the context object’s fillRect(leftX, topY, width, height) method to draw the rectangle with radial gradient color.
`ctx.fillRect(leftX, topY, width, height);`

1. There are 2 buttons on this example web page.
2. When you click the first button, it will draw a rectangle with the linear gradient color.
3. When you click the second button, it will draw a rectangle with the radial gradient color.
```<!DOCTYPE html>
<html>
<meta charset="ISO-8859-1">
<style>
canvas{
display:none;
}
</style>
<body>
<div>
</div>
<div>
</div>
</body>
</html>```
```/**
*
*/

// Get the html canvas object.
var canvas = document.getElementById(id);

if(canvas==null){

alert("Can not find the html element with element id " + id);

return false;

}

canvas.style.display = 'block';

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

lgStartX = 0;
lgStartY = 0;
lgEndX = 300;
lgEndY = 0;

leftX = 10;
topY = 10;
width = 500;
height = 100;

ctx.fillRect(leftX, topY, width, height);

}

// Get the html canvas object.
var canvas = document.getElementById(id);

if(canvas==null){

alert("Can not find the html element with element id " + id);

return false;

}

canvas.style.display = 'block';

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

rgStartX = 100;
rgStartY = 70;

rgEndX = 100;
rgEndY = 70;

leftX = 0;
topY = 0;
width = 200;
height = 200;

ctx.fillRect(leftX, topY, width, height);
}```

We don’t spam!

We don’t spam!