How To Draw Gradient Colors In Html5 Canvas

This article will tell you how to draw gradient colors using Html5 canvas.

Table of Contents

1. Draw Gradient Color In Html5 Canvas Steps.

1.1 Linear Gradient Color.

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

lgStartX: The linear gradient effect starting point’s x coordinate.
lgStartY: The linear gradient effect starting point’s y coordinate.
lgEndX: The linear gradient effect ending point’s x coordinate.

lgEndY: The linear gradient effect ending point’s y coordinate.
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');
```
Now you should set the linearGradient object to the context object’s fillStyle attribute.
```
ctx.fillStyle = linearGradient;
```

Now you can draw the rectangle using the context object’s fillRect() method.
```
ctx.fillRect(leftX, topY, width, height);
```

1.2 Radial Gradient Color.

Call the Html5 canvas context object’s method createRadialGradient(rgStartX, rgStartY, rgStartRadius, rgEndX, rgEndY, rgEndRadius) to create a radial gradient object.
```
radialGradient = ctx.createRadialGradient(rgStartX, rgStartY, rgStartRadius, rgEndX, rgEndY, rgEndRadius);
```
rgStartX: The center point’s x coordinate of the starting circle in the gradient.

rgStartY: The center point’s y coordinate of the starting circle in the gradient.
rgStartRadius: The starting circle’s radius.
rgEndX: The center point’s x coordinate of the ending circle in the gradient.

rgEndY: The center point’s y coordinate of the ending circle in the gradient.
rgEndRadius: The ending circle’s radius.
Call the radialGradient object’s addColorStop(offset, color) method to set the color and offset.

radialGradient.addColorStop(0.5, 'yellow');

Set the above radialGradient object to the context object’s fillStyle attribute.
```
ctx.fillStyle = radialGradient;
```
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);
```

2. Html5 Canvas Linear Gradient & Radial Gradient Example.

There are 2 buttons on this example web page.
When you click the first button, it will draw a rectangle with the linear gradient color.
When you click the second button, it will draw a rectangle with the radial gradient color.

There are 2 source files in this example html5-canvas-gradient.html, html5-canvas-gradient.js.

html5-canvas-gradient.html.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Html5 Canvas Linear & Radial Gradient Examples</title>
<script type="text/javascript" src="html5-canvas-gradient.js" charset="utf-8"></script>
<style>
canvas{
  display:none;
}
</style>
</head>
<body>
<h3>Html5 Canvas Linear Gradient Example.</h3>
<div>
    <input type="button" id="draw-linear-gradient" value="Linear Gradient Example" onclick="drawLinearGradient('linear-gradient-canvas', this)" />
    <canvas id="linear-gradient-canvas"></canvas>
</div>
<h3>Html5 Canvas Radial Gradient Example.</h3>
<div>
    <input type="button" id="draw-radial-gradient" value="Radial Gradient Example" onclick="drawRadialGradient('radial-gradient-canvas', this)" />
    <canvas id="radial-gradient-canvas"></canvas>
</div>
</body>
</html>

html5-canvas-gradient.js.

/**
 * 
 */

function drawLinearGradient(id, src){
    
    // 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;
    
    linearGradient = ctx.createLinearGradient(lgStartX, lgStartY, lgEndX, lgEndY);
    
    linearGradient.addColorStop(0, 'red');
    
    linearGradient.addColorStop(0.5, 'yellow');
    
    linearGradient.addColorStop(1, 'blue');
    
    ctx.fillStyle = linearGradient;
    
    leftX = 10;
    topY = 10;
    width = 500;
    height = 100;
    
    ctx.fillRect(leftX, topY, width, height);
    
    
}


function drawRadialGradient(id, src){
    
    // 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;
    rgStartRadius = 5;
    
    rgEndX = 100;
    rgEndY = 70;
    rgEndRadius = 90;
    
    radialGradient = ctx.createRadialGradient(rgStartX, rgStartY, rgStartRadius, rgEndX, rgEndY, rgEndRadius);
    
    radialGradient.addColorStop(0, 'red');
    
    radialGradient.addColorStop(0.5, 'yellow');
    
    radialGradient.addColorStop(1, 'blue');
    
    ctx.fillStyle = radialGradient;
    
    leftX = 0;
    topY = 0;
    width = 200;
    height = 200;
    
    ctx.fillRect(leftX, topY, width, height);
}

1. Draw Gradient Color In Html5 Canvas Steps.

1.1 Linear Gradient Color.

1.2 Radial Gradient Color.

2. Html5 Canvas Linear Gradient & Radial Gradient Example.

Leave a Comment Cancel Reply