Applying gradient requires three steps to be completed.
-
1. Creation of the gradient object
-
2. Applying colors and stops where colors change. We need to call on addColorStop for identifying color stops.
-
3. Call on fillStyle or strokeStyle on the context
Gradient can be specified from point to point. If you set starting point as (0,0) and ending as (0,50) than fill or stroke will shift gradually from one color to another as specified by the user.
We can apply transparency value to the gradient as well as transition. If you want to apply these two commands then you need to use RGBA functions that has alpha component.
Code explains how to apply gradient is presented below.
<script>
function gradientExample(context) {
var grad = context.createLinearGradient(-1, -10,
1, -10);
grad.addColorStop(0, '#441100');
grad.addColorStop(0.4, '#772200');
context.fillStyle = grad;
context.fillRect(-1, -10, 5, 10);
}
</script>
This code will apply gradient to an object making it more appealing to the user. In addition, HTML5 provide capability to apply radial gradient that allows you to specify circular representation of colors.
creatRadialGradient(x1,y1,x2,y2,r1);
In the example above; x and y represent center of the circle and r is a radius.