Shape elements

A shape element is a type of element that renders a vector image. Apps can use the Design Interaction capability to add shape elements to a user's design.

Benefits

• Shape elements retain their quality as they're resized.
• Shape elements are faster to create than equivalent image elements.
• Shape elements don't count against a user's upload quota.

Creating shape elements

There are two ways to add a shape element to a design:

import React from "react";
import { getDesignInteraction } from "@canva/design-interaction";

export const App = () => {
  const designInteraction = getDesignInteraction();

  const handleClick = () => {
    designInteraction.addNativeElement({
      type: "SHAPE",
      paths: [
        {
          d: "M 0 0 H 100 V 100 H 0 L 0 0",
          fill: {
            color: "#32a852",
          },

          // Optional
          stroke: {
            weight: 1,
            color: "#ff0099",
            strokeAlign: "inset",
          },
        },
      ],
      viewBox: {
        height: 100,
        width: 100,
        left: 0,
        top: 0,
      },
    });
  };

  return (
    <div>
      <button onClick={handleClick}>Add shape element</button>
    </div>
  );
};

The anatomy of a shape element

Shape elements are comparable to SVGs, in that they're made up of paths, fills, strokes, and a view box. This section describes each of these ingredients and how they differ from SVGs.

Paths

A path is a combination of one or more lines that forms a shape. For example, a path could be a single line that forms a circle or a combination of lines that forms a hexagon.

By themselves, paths are not visible. They define the boundaries of a shape but not the contents of a shape. For a path to be made visible, it requires a fill or a stroke.

Using path commands

A path command defines the position, length, and curvature of a path.

Path commands are made up of two ingredients:

• A letter that defines what the path command does
• A list of numeric parameters

For example, the following path commands draw a square:

M 0 0
H 100
V 100
H 0
L 0 0

Here's a breakdown of what these commands are doing:

• M 0 0 moves the current point to 0 on the X axis and 0 on the Y axis.
• L 100 0 draws a line to 100 on the X axis and 0 on the Y axis.
• L 100 100 draws a line to 100 on the X axis and 100 on the Y axis.
• L 0 100 draws a line to 0 on the X axis and 100 on the Y axis.
• L 0 0 draws a line to 0 on the X axis and 0 on the Y axis.

Supported path commands

When creating shape elements, the following path commands are available:

• MoveTo: M, m
• LineTo: L, l, H, h, V, v
• Cubic Bézier Curve: C, c, S, s
• Elliptical Arc Curve: A, a
• ClosePath: Z, z

A command that is available to SVGs but is not available to shape elements is the Q command, which is used to create quadratic Bézier curves.

How casing affects path commands

Path commands are case sensitive and their behavior depends on their casing:

When a command is uppercase, the parameters are absolute coordinates — that is, relative to an origin of 0,0. When a command is lowercase, the parameters are relative to the previous coordinate.

Path limitations

• A shape element must have between 1 and 30 paths.
• The maximum combined size of all paths must not exceed 2kb.
• Paths must start with an M command.
• Paths must not have more than one M command.
• Paths must not use the Q command.
• Paths must be closed, either with a Z command at the end or by having the last coordinate match the first coordinate.

Fills

A fill defines the interior color of a path. This is the color that appears within the boundaries of the shape. For example, if you wanted to create a pink square, the color pink would be the fill.

The maximum number of unique fill colors across a shape's paths must not exceed 6.

Strokes

A stroke is an outline that can be applied to a path. This outline is rendered along the edges of a path and can be configured with a custom weight (width) and color.

View box

The view box is a rectangular area that defines the coordinates of the shape element. It determines how the shape should be scaled, rotated, or positioned when it is displayed.

To learn more, see the MDN documentation.