How to use Radial Gradient on HTML5 canvas
Description
We define radial gradients using two circles. The start of the gradient is defined by the first circle, the end of the gradient by the second circle.
createRadialGradient(x0, y0, r0, x1, y1, r1) creates a radial gradient and returns CanvasGradient.
The six arguments to the createRadialGradient method represent:
- The first and second arguments are coordinate for the center of the start circle.
- The third argument is radius of the start circle
- The fourth and fifth arguments is coordinate for the center of the finish circle
- The sixth argument is radius of the finish circle
CanvasGradient object defines the method shown in the following table:
| Name | Description | Returns |
|---|---|---|
| addColorStop(position, color) | Adds a solid color to the gradient line | void |
Example
<!DOCTYPE HTML>
<html>
<head>
<style>
canvas {<!--from ww w. ja v a 2s . c o m-->
border: thin solid black;
margin: 4px
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="140">
Your browser doesn't support the <code>canvas</code> element
</canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
var grad = ctx.createRadialGradient(250, 70, 20, 200, 60, 100);
grad.addColorStop(0.2, "red");
grad.addColorStop(0.5, "white");
grad.addColorStop(1, "black");
ctx.fillStyle = grad;
ctx.fillRect(20, 20, 500, 140);
</script>
</body>
</html>
Example 2
<!DOCTYPE HTML>
<html>
<head>
<script>
function drawTriangle(context, x, y, triangleWidth, triangleHeight, fillStyle){
context.beginPath();<!-- w ww . j av a 2 s .c om-->
context.moveTo(x, y);
context.lineTo(x + triangleWidth / 2, y + triangleHeight);
context.lineTo(x - triangleWidth / 2, y + triangleHeight);
context.closePath();
context.fillStyle = fillStyle;
context.fill();
}
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var grd;
var triangleWidth = 150;
var triangleHeight = 150;
var triangleY = canvas.height / 2 - triangleWidth / 2;
// radial gradient fill (second from right)
var centerX = 300;
var centerY = 100;
grd = context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 100);
grd.addColorStop(0, "red");
grd.addColorStop(0.17, "orange");
grd.addColorStop(0.33, "yellow");
grd.addColorStop(0.5, "green");
grd.addColorStop(0.666, "blue");
grd.addColorStop(1, "violet");
drawTriangle(context, canvas.width / 2, triangleY, triangleWidth, triangleHeight, grd);
};
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>
</body>
</html>