Welcome back to my "HTML5 Canvas For Beginners" article series. In the previous two articles of the series I explained the basics of canvas, arc, curves and various shapes, you can read about them here:
In today's article, we will learn about Gradients.
We can use gradients to fill circles, text, lines, rectangles and so on and canvas shapes are not limited to only solid colors.
Canvas has two types of gradients:
- createLinearGradient
- createRadialGradient
Once we have created our gradient object, then we can use two or more color stops to fill our shape. We can fill colors using the "addColorStop()" property. This method defines the color stop and its position with the gradient. Positions of the gradient can be given between 0 and 1. We can use the gradient to set the strokeStyle or fillStyle property and after that, we can draw the shape like a line, a circle, a rectangle or text.
In HTML5 Canvas, we can create a linear gradient using the "createLinearGradient()" method. The Linear Gradient's direction moves from a starting point to an ending point of the imaginary line defined with the createLinearGradient() method. Here, we have used three color stops, starting with the white color that originates at the starting point then using orange color and at last, we are using a green color that ends with the end point. Color stops can be placed with the imaginary line between 0 and 1, where 0 is the start point and 1 is the end point. The Linear Gradient method requires only four parameters:
- start x position
- start y position
- destination x position
- destination y position
Now, the Linear Gradient method looks like "createLinearGradient(sx, sy, dx, dy)".
Example:
- <body>
- <form id="form1" runat="server">
- <div>
- <canvas id="drawCanvas" width="600" height="500"></canvas>
- <script>
- var drawCanvas = document.getElementById('drawCanvas');
- var ctx = drawCanvas.getContext('2d');
-
- ctx.rect(0, 0, drawCanvas.width, drawCanvas.height);
- var lineGrid = ctx.createLinearGradient(0, 0, drawCanvas.width, drawCanvas.height);
- lineGrid.addColorStop(0.2, '#fff');
- lineGrid.addColorStop(0.5, 'orange');
- lineGrid.addColorStop(1, '#0f0');
- ctx.fillStyle = lineGrid;
- ctx.fill();
- ctx.stroke();
- </script>
- </div>
- </form>
- </body>
Output
In HTML5 Canvas, we can create a radial gradient using the "createRadialGradient()" method. A radial gradient can be defined using two imaginary circles, a starting circle and an ending circle where the gradient starts from the starting circle and moves to the ending circle. The Radial Gradient method requires the following six parameters:
- sx position of the first circle
- sy position of the first circle
- sr for the radius of the first circle
- dx position of the second circle
- dy position of the second circle
- dr for the radius of the second circle
Now, the Radial Gradient method looks like "createLinearGradient(sx, sy, sr, dx, dy, dr)".
Example
- <body>
- <form id="form1" runat="server">
- <div>
- <canvas id="drawCanvas" width="600" height="500"></canvas>
- <script>
- var drawCanvas = document.getElementById('drawCanvas');
- var ctx = drawCanvas.getContext('2d');
-
- ctx.rect(0, 0, drawCanvas.width, drawCanvas.height);
- var lineGrid = ctx.createRadialGradient(300, 250, 10, 300, 250, 350);
- lineGrid.addColorStop(0.2, '#fff');
- lineGrid.addColorStop(0.5, 'orange');
- lineGrid.addColorStop(1, '#0f0');
- ctx.fillStyle = lineGrid;
- ctx.fill();
- ctx.stroke();
- </script>
- </div>
- </form>
- </body>
Output
In the next article, we learn about HTML5 Canvas Images.