Creating an inner stroke of semi transparency on colored squares? - Javascript Canvas

Javascript examples for Canvas:Stroke

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

Description

Creating an inner stroke of semi transparency on colored squares?

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(){// w w  w.  java  2 s.c o  m
      var canvas=document.getElementById("canvas");
      var ctx=canvas.getContext("2d");
      ctx.beginPath();
      ctx.fillStyle = "red";
      ctx.fillRect(100,100,50,50);
      ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
      ctx.fillRect(100,100,50,50);
      ctx.fillStyle = this.color;
      ctx.fillRect(105, 105, 40, 40);
      ctx.fill();
      ctx.beginPath();
      ctx.rect(160,102.5,45,45);
      ctx.fillStyle = 'rgb(163,0,0)';
      ctx.fill();
      ctx.lineWidth = 5;
      ctx.strokeStyle = 'rgb(204,0,0)';
      ctx.stroke();
    }); // end $(function(){});

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

Related Tutorials