HTML | canvas createLinearGradient() Method
The HTML Canvas createLinearGradient() method is used to create a linear gradient object.
The gradient can be used to fill different colors in rectangles, circles, lines, text, etc. We can then assign the gradient color to the strokeStyle or fillStyle properties to fill or draw shapes such as rectangles, circles, lines, text, etc.
The addColorStop() method adds the different colors, and position the colors in the gradient object.
Syntax::
context.createLinearGradient(x0, y0, x1, y1);
Parameters::
- x0: This parameter indicates the x-coordinate of the start point of the gradient.
- y0: This parameter indicates the y-coordinate of the start point of the gradient.
- x1: This parameter indicates the x-coordinate of the end point of the gradient.
- y1: This parameter indicates the y-coordinate of the end point of the gradient.
Example 1:
<!DOCTYPE html> < html > < head > < title > HTML canvas createLinearGradient() Method </ title > </ head > < body > < center > < h1 style = "color:green" > GeeksforGeeks </ h1 > < h2 > HTML canvas createLinearGradient() Method </ h2 > < canvas id = "myCanvas" width = "350" height = "180" > </ canvas > < script > var a = document.getElementById( "myCanvas"); var gctx = a.getContext("2d"); var clg = gctx.createLinearGradient( 100, 150, 200, 120); clg.addColorStop(0, "yellow"); clg.addColorStop(1, "pink"); gctx.fillStyle = clg; gctx.fillRect(80, 20, 200, 110); </ script > </ center > </ body > </ html > |
Output:
Example 2:
<!DOCTYPE HTML> < html > < head > < title > HTML canvas createLinearGradient() Method </ title > </ head > < body > < center > < h1 style = "color:green" > GeeksforGeeks </ h1 > < h2 > HTML canvas createLinearGradient() Method </ h2 > < canvas id = "mycanvas" ></ canvas > < script > var canvas = document.getElementById('mycanvas'); var ctx = canvas.getContext('2d'); var lingrad = ctx.createLinearGradient(0, 0, 0, 150); lingrad.addColorStop(0, '#00AB3B'); lingrad.addColorStop(0.5, '#45ec3f'); lingrad.addColorStop(0.5, '#66CC20'); lingrad.addColorStop(1, '#f3f'); ctx.fillStyle = lingrad; // draw shape ctx.fillRect(10, 10, 130, 130); </ script > </ center > </ body > </ html > |
Output:
Supported Browsers: The browsers supported by canvas createLinearGradient() Method are listed below:
- Google Chrome
- Internet Explorer 9.0
- Firefox
- Apple Safari
- Opera
Recommended Posts:
- HTML | canvas arc() Method
- HTML | canvas fillRect() Method
- HTML | canvas setTransform() Method
- HTML | canvas fill() Method
- HTML | canvas quadraticCurveTo() Method
- HTML | canvas translate() Method
- HTML | canvas measureText() Method
- HTML | canvas beginPath() Method
- HTML | canvas getImageData() Method
- HTML | canvas createPattern() Method
- HTML | canvas rect() Method
- HTML | canvas stroke() Method
- HTML | canvas strokeRect() Method
- HTML | canvas createImageData() Method
- HTML | canvas putImageData() Method
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.