Html5 canvas draw gradient Tag

The canvas draw gradient tag is used to draw gradient graphics on the web page.

Example Code

<!DOCTYPE HTML>
<canvas id="draw_gradient" width="200" height="100">
  Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
  var c=document.getElementById("draw_gradient");
  var cxt=c.getContext("2d");
  var grd=cxt.createLinearGradient(10,10,185,190);
    grd.addColorStop(0,"#FF0000");
    grd.addColorStop(1,"#00FF00");
    cxt.fillStyle=grd;
    cxt.fillRect(0,0,180,80);
</script>

Out Put :

In the above example code createLinearGradient() function is used to draw gradient. The first parameter 10 is start point for left to right first color and next 10 is end point left to right color.In the 3,4 parameter use to same as first two parameters.

Canvas Tag Attribute

Content