Blog

createLinearGradient() method in HTML5

Posted by Mahak Gupta Blogs | HTML 5 Aug 20, 2012
In this Blog, I will take an example of a Canvas method.
In this Blog, I will take an example of a Canvas method. Basically it shows how we show a Linear gradient In Canvas, In my example it changes the color to Blue to White according to the values:


<html>
<body>

<canvas id="MyFirstCanvas" width="150" height="150">
There is an errr that your browser does not support the HTML5 Canvas tag.</canvas>

<script type="text/javascript">
var x=document.getElementById("MyFirstCanvas");
var mycont=x.getContext("2d");

var mygred=mycont.createLinearGradient(100,150,0,0); 
mygred.addColorStop(0,"Blue");
mygred.addColorStop(1,"White");

mycont.fillStyle=mygred;
mycont.fillRect(0,40,100,150);

</script>

</body>
</html>


The Output Will Be:

1.png
post comment
     
COMMENT USING
PREMIUM SPONSORS
DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and add new content to existing PDF documents from within your applications.
SPONSORED BY
  • PDF reports have never been easier to create. With our included WYSIWYG Designer, you can layout your reports, set up your data source and let DynamicPDF ReportWriter do the rest.
Join a Chapter