HTML5 canvas SVG Path Tutorial

To create an SVG path with Konva, we can instantiate a Konva.Path() object.

Paths are most commonly used when we want to export an SVG Path into an HTML5 Canvas path, or if we want to manifest complex drawings as a data string rather than creating a custom shape.

For a full list of attributes and methods, check out the Konva.Path documentation.

If you want to draw full SVG image into the canvas take a look into How to draw SVG image post.

Konva Path Demoview raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Path Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <script>
      var stage = new Konva.Stage({
        container: 'container',
        width: window.innerWidth,
        height: window.innerHeight,
      });

      var layer = new Konva.Layer();

      var path = new Konva.Path({
        x: 50,
        y: 40,
        data: 'M213.1,6.7c-32.4-14.4-73.7,0-88.1,30.6C110.6,4.9,67.5-9.5,36.9,6.7C2.8,22.9-13.4,62.4,13.5,110.9C33.3,145.1,67.5,170.3,125,217c59.3.166.7,93.5-71.9,111.5-106.1C263.4,64.2,247.2,22.9.3.16.1,6.7z',
        fill: 'green',
        scaleX: 0.5,
        scaleY: 0.5,
      });

      // add the shape to the layer
      layer.add(path);

      // add the layer to the stage
      stage.add(layer);
    </script>
  </body>
</html>

Enjoying Konva? Please consider to support the project.