HTML5 Game - Creates a Path for a Tree Canopy

  1. HOME
  2. HTML5 Game
  3. Canvas Shape
  4. Tree

Description

Creates a Path for a Tree Canopy

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
  <title>Closed path example</title>

  <canvas id="trails" style="border: 1px solid;"  width="400" height="600"> </canvas>
  <script>
        function createCanopyPath(context) {
            // Draw the tree canopy
            context.beginPath();//from   w w  w .j  a  v a 2  s  . c  om

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

            // Top of the tree
            context.lineTo(0, -140);

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

            // Close the path back to its start point
            context.closePath();
        }

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

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

            // Create the shape for our canopy path
            createCanopyPath(context);

            // Stroke the current path
            context.stroke();
            context.restore();
        }

        window.addEventListener("load", drawTrails, true);
  </script>
</html>

Related Topic