Canvas How to - Add shadow for arc

Question

We would like to know how to add shadow for arc.

Answer


<!--from w  ww  . j  a  va2s  . c o  m-->
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
    $(function() {
        draw(document.getElementById('canvas').getContext('2d'));
        function draw(ctx) {
            ctx.textBaseline = "top";
            ctx.font = "12pt Arial";
            ctx.fillStyle = "red";
            ctx.strokeStyle = "blue";
            text = setShadow(ctx, "red", 0, 0, 20);
            ctx.arc(60, 60, 10, 0, Math.PI*2, false);
            ctx.fill();
        }
        function setShadow(ctx, color, ox, oy, blur) {
          ctx.shadowColor = color;
          ctx.shadowOffsetX = ox;
          ctx.shadowOffsetY = oy;
          ctx.shadowBlur = blur;
        }
    });
});//]]>  
</script>
</head>
<body>
  <canvas id=canvas>

</body>
</html>

The code above is rendered as follows: