Set Background color on a specific area of canvas - Javascript Canvas

Javascript examples for Canvas:Example

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

Description

Set Background color on a specific area of canvas

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://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <style id="compiled-css" type="text/css">
.stalker {//from  w w  w.  j  a v a2 s  .  c  o  m
   background-color: #6fc39a;
   height:200px;
   border-top-color: rgba(168, 228, 165, 0.7);
   border-bottom-color: rgba(53, 162, 142, 0.3);
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
var stalker = $('.stalker');
var canvas = $('#canvas')[0];
var ctx = canvas.getContext('2d'), gradient, initialized = false;
$("#container").mousemove(function(e){
    setTimeout(function(){
                initialized = true;
                canvas.width  = stalker.width();
                canvas.height = stalker.height();
                gradient = ctx.createRadialGradient(e.pageX, e.pageY, 0, e.pageX, e.pageY, canvas.width);
                gradient.addColorStop(0, stalker.css('border-top-color'));
                gradient.addColorStop(1, stalker.css('border-bottom-color'));
                ctx.fillStyle = gradient;
                ctx.fillRect(0, 0, canvas.width, canvas.height);
            }, initialized ? 200 : 0);
});
    });

      </script> 
   </head> 
   <body> 
      <div id="container" class="stalker"> 
         <canvas id="canvas" width="1600" height="433"></canvas> 
      </div>  
   </body>
</html>

Related Tutorials