HTML5 CANVAS Shadow - Javascript Canvas

Javascript examples for Canvas:Example

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

Description

HTML5 CANVAS Shadow

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> 
      <script type="text/javascript">
$(document).ready(function(){
var canvas = $("#SAMPLE"),
    ctx = canvas[0].getContext("2d");
    ctx.save();//from www.  j  a  v  a  2  s .  co m

    ctx.strokeStyle   = "#0067ef";
    ctx.fillStyle     = "#0067ef";
    ctx.lineCap       = "round";
    ctx.lineWidth     = "15";
    ctx.globalAlpha   = 1;
    ctx.shadowBlur    = 0;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;
    ctx.shadowColor   = "#363636";
    ctx.beginPath();
    ctx.moveTo( 10, 10);
    ctx.lineTo(200, 200);
    ctx.stroke();
    ctx.closePath();

    ctx.shadowBlur    = 5;
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 5;
    ctx.shadowColor   = "#363636";
    ctx.beginPath();
    ctx.moveTo(300, 10);
    ctx.lineTo(400, 200);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();

    var save = canvas[0].toDataURL("image/png");

    ctx.clearRect(0, 0, 960, 480);

    var img = new Image();
        img.onload = function() {
            ctx.drawImage(this,0,0);
            $("#REF")[0].getContext("2d").drawImage(this,0,0);
            console.log(refctx);
        };
        img.src = save;
        document.body.appendChild(img);
});

      </script> 
   </head> 
   <body> 
      <canvas id="SAMPLE" width="960" height="480"></canvas> 
      <canvas id="REF" width="960" height="480"></canvas>  
   </body>
</html>

Related Tutorials