HTML5 Game - Shear to draw shadow

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Shear to draw shadow

Description

Shear to draw shadow

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
  <title>Shadow example</title>

  <canvas id="trails" style="border: 1px solid;"  width="400" height="600"> </canvas>
  <script>

            drawTrails();//from  w w w  .j  a  v a  2 s .co m


        function createCanopyPath(context) {
            context.beginPath();
            context.moveTo(-25, -50);
            context.lineTo(-10, -80);
            context.lineTo(-20, -80);
            context.lineTo(-5, -110);
            context.lineTo(-15, -110);

            context.lineTo(0, -140);

            context.lineTo(15, -110);
            context.lineTo(5, -110);
            context.lineTo(20, -80);
            context.lineTo(10, -80);
            context.lineTo(25, -50);
            context.closePath();
        }

        function drawTree(context) {
            context.save();
            context.transform(1, 0,
                              -0.5, 1,
                              0, 0);
            context.scale(1, 0.6);
            context.fillStyle = 'rgba(0, 0, 0, 0.2)';
            context.fillRect(-5, -50, 10, 50);
            createCanopyPath(context);
            context.fill();
            context.restore();

            let trunkGradient = context.createLinearGradient(-5, -50, 5, -50);
            trunkGradient.addColorStop(0, '#663300');
            trunkGradient.addColorStop(0.4, '#996600');
            trunkGradient.addColorStop(1, '#552200');
            context.fillStyle = trunkGradient;
            context.fillRect(-5, -50, 10, 50);

            let canopyShadow = context.createLinearGradient(0, -50, 0, 0);
            canopyShadow.addColorStop(0, 'rgba(0, 0, 0, 0.5)');
            canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)');
            context.fillStyle = canopyShadow;
            context.fillRect(-5, -50, 10, 50);

            createCanopyPath(context);

            context.lineWidth = 4;
            context.lineJoin = 'round';
            context.strokeStyle = '#663300';
            context.stroke();

            context.fillStyle = '#339900';
            context.fill();
        }


        function drawTrails() {
            let canvas = document.getElementById('trails');
            let context = canvas.getContext('2d');

            context.save();
            context.translate(130, 250);
            drawTree(context);
            context.restore();

            context.save();
            context.translate(260, 500);

            context.scale(2, 2);
            drawTree(context);
            context.restore();

        }

  </script>
</html>

Related Topics