Using gradients in HTML5 canvas - Javascript Canvas

Javascript examples for Canvas:Gradient

  1. HOME
  2. Javascript
  3. Canvas
  4. Gradient

Description

Using gradients in HTML5 canvas

Demo Code

ResultView the demo in separate window 

<!doctype html>
<html>
   <head> 
      <!-- reset css --> 
      <script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script> 
      <style>

body{ background-color: ivory; }
canvas{border:1px solid red;}

      </style> 
      <script>
$(function(){//  ww  w .ja  va 2  s  . c  o  m
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var grd=ctx.createLinearGradient(0, 0, 200, 0);
    grd.addColorStop(0, "red");
    grd.addColorStop(0.5, "blue");
    grd.addColorStop(1, "white");
    ctx.strokeStyle= grd;
    ctx.lineWidth=5;
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(200,0);
    ctx.lineTo(150,200);
    ctx.lineTo(50,200);
    ctx.lineTo(0,0);
    ctx.stroke();
}); // end $(function(){});

      </script> 
   </head> 
   <body> 
      <canvas id="canvas" width="300" height="300"></canvas>  
   </body>
</html>

Related Tutorials