Change gradient color on HTML5 canvas mouseover - Javascript Canvas

Javascript examples for Canvas:Mouse

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

Description

Change gradient color on HTML5 canvas mouseover

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.js"></script> 
      <style id="compiled-css" type="text/css">

#first {/*from  w  ww.j  a v  a2 s . c  om*/
   margin: 20px;
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
var canvas = document.getElementById("first");
var context = canvas.getContext("2d");
var draw = function(color1, color2, shadow) {
    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(0, 195);
    context.lineTo(230, 195);
    context.lineTo(350, 0);
    context.lineTo(0, 0);
    context.closePath();
    context.moveTo(365, 0);
    context.lineTo(245, 195);
    context.lineTo(615, 195);
    context.lineTo(735, 0);
    context.closePath();
    context.moveTo(750, 0);
    context.lineTo(630, 195);
    context.lineTo(960, 195);
    context.lineTo(960, 0);
    context.closePath();
    var lingrd = context.createLinearGradient(0, 0, 0, 195);
    lingrd.addColorStop(1, color1);
    lingrd.addColorStop(0, color2);
    context.fillStyle = lingrd;
    context.shadowColor = shadow;
    context.shadowBlur = 5;
    context.shadowOffsetX = 2;
    context.shadowOffsetY = 3;
    context.fill();
}
draw("#474747", "#6a6a6a", "#b9b9b9");
canvas.addEventListener("mouseover", function() {
    draw("#ff0000", "#00ff00", "#0000ff");
});
canvas.addEventListener("mouseout", function() {
    draw("#474747", "#6a6a6a", "#b9b9b9");
});
    });

      </script> 
   </head> 
   <body> 
      <canvas id="first" width="960" height="200"></canvas>  
   </body>
</html>

Related Tutorials