Canvas

Root element. Every render tree must start with a <Canvas>.

Props

Prop	Type	Required	Description
`width`	`number`	Yes	Canvas width in px
`height`	`number`	Yes	Canvas height in px
`background`	`string`		Background color
`language`	`"ja" \| "en" \| "auto"`		Default language for text layout
`meta`	`Record<string, string>`		Metadata emitted as `data-boundsvg-meta-*` on the svg root (max 16 keys)
`debug`	`boolean`		Draw bounding boxes and guide lines
`id`	`string`		Stable NodeId for hit-testing
`onClick`	`string`		Click handler reference

All 21 event handler props are supported. See Event Handlers for the full list.

Example

tsx

<Canvas width={400} height={120} background="#1e293b">
  <Flex
    direction="column"
    justifyContent="center"
    alignItems="center"
    width={400}
    height={120}
  >
    <Text font="NotoSansJP" fontSizePx={24} color="#f8fafc">
      Hello, Canvas!
    </Text>
  </Flex>
</Canvas>

Generated SVG

xml

<svg xmlns="http://www.w3.org/2000/svg" data-boundsvg-node-id="auto:0" viewBox="0 0 400 120" width="400" height="120">
  <rect x="0" y="0" width="400" height="120" fill="#1e293b"/>
  <g data-boundsvg-node-id="auto:0.0">
    <g data-boundsvg-node-id="auto:0.0.0">
      <g data-boundsvg-node-id="auto:0.0.0" data-boundsvg-text="Hello, Canvas!" aria-label="Hello, Canvas!">
        <path d="M123.42 69.52V51.93h2.21V59.3h8.21V51.93h2.23V69.52h-2.23v-8.3h-8.21v8.3zM145.96 69.83q-1.75 0-3.17-.81-1.41-.82-2.24-2.34-.83-1.53-.83-3.66q0-1.61.48-2.87t1.31-2.16t1.88-1.37q1.06-.47 2.16-.47q1.68 0 2.83.75q1.16.74 1.77 2.12t.61 3.25q0 .36-.02.67-.03.32-.08.58h-8.78q.07 1.39.64 2.41.56 1.02 1.5 1.59.93.56 2.18.56.96 0 1.74-.28.78-.27 1.52-.75l.77 1.46q-.84.55-1.89.94-1.06.38-2.38.38zM141.86 61.96h6.98q0-1.97-.85-3.01-.85-1.05-2.39-1.05-.91 0-1.72.48-.8.48-1.34 1.37t-.68 2.21zM156.28 69.83q-.82 0-1.32-.33-.5-.34-.74-1t-.24-1.57V50.42h2.2V67.07q0 .51.18.72.18.22.42.22.1 0 .2-.01.09-.02.26-.04l.31 1.68q-.24.07-.53.13-.28.06-.74.06zM163.1 69.83q-.82 0-1.32-.33-.51-.34-.75-1t-.24-1.57V50.42H163V67.07q0 .51.18.72.18.22.42.22.1 0 .19-.01.1-.02.27-.04l.31 1.68q-.24.07-.53.13t-.74.06zM172.67 69.83q-1.58 0-2.97-.8-1.4-.81-2.22-2.33-.83-1.52-.83-3.68q0-2.19.83-3.71.82-1.53 2.22-2.34q1.39-.82 2.97-.82q1.2 0 2.29.46q1.1.45 1.94 1.34t1.32 2.16.48 2.91q0 2.16-.84 3.68t-2.21 2.33q-1.37.8-2.98.8zM172.67 68.01q1.13 0 1.98-.63.85-.62 1.33-1.75t.48-2.61q0-1.52-.48-2.64-.48-1.13-1.33-1.76-.85-.62-1.98-.62t-1.98.62q-.85.63-1.32 1.76-.47 1.12-.47 2.64q0 1.48.47 2.61t1.32 1.75q.85.63 1.98.63zM181.41 74.08l-.53-1.3q1.13-.5 1.78-1.36.64-.87.62-1.97l-.24-1.97l1.08 1.61q-.24.26-.52.37-.27.11-.58.11-.65 0-1.13-.41t-.48-1.13.49-1.13q.49-.4 1.16-.4.87 0 1.36.68t.49 1.88q0 1.73-.95 3.03-.94 1.29-2.55 1.99zM200.7 69.83q-1.63 0-3.03-.61-1.41-.61-2.44-1.79-1.03-1.17-1.61-2.87-.57-1.69-.57-3.82q0-2.14.59-3.83.58-1.69 1.64-2.87t2.47-1.8q1.42-.62 3.1-.62q1.61 0 2.83.66t1.99 1.5l-1.2 1.44q-.69-.75-1.58-1.2-.89-.46-2.02-.46-1.65 0-2.9.86-1.25.87-1.95 2.46-.69 1.6-.69 3.78q0 2.24.67 3.86t1.9 2.49q1.22.88 2.9.88q1.25 0 2.24-.53q1-.53 1.84-1.46l1.22 1.41q-1.03 1.2-2.35 1.86t-3.05.66zM212.18 69.83q-1.08 0-1.95-.43-.86-.43-1.35-1.26-.5-.83-.5-2q0-2.14 1.91-3.28t6.09-1.6q0-.84-.23-1.59-.23-.76-.81-1.23-.57-.46-1.65-.46-1.13 0-2.13.44-.99.44-1.78.95l-.84-1.51q.6-.39 1.39-.78.79-.4 1.73-.66.93-.27 1.99-.27q1.58 0 2.58.67.99.68 1.46 1.86.47 1.19.47 2.82v8.02h-1.8l-.19-1.56h-.07q-.92.77-2.01 1.32t-2.31.55zM212.8 68.06q.94 0 1.79-.44.85-.43 1.79-1.27V62.73q-2.19.24-3.48.68-1.3.45-1.85 1.08-.55.64-.55 1.5q0 1.13.67 1.6t1.63.47zM222.69 69.52V56.49h1.8l.21 1.89h.05q.94-.93 1.98-1.58q1.05-.65 2.39-.65q2.06 0 3.02 1.31t.96 3.8v8.26h-2.18V61.55q0-1.85-.59-2.66-.59-.82-1.88-.82-1.01 0-1.8.51-.79.5-1.75 1.48v9.46zM240.14 69.52l-4.71-13.03h2.28l2.45 7.41q.31.96.61 1.94.3.97.59 1.9h.12q.31-.93.61-1.9.3-.98.59-1.94l2.47-7.41h2.16L242.7 69.52zM252.23 69.83q-1.08 0-1.94-.43-.87-.43-1.36-1.26t-.49-2q0-2.14 1.91-3.28t6.08-1.6q0-.84-.23-1.59-.22-.76-.8-1.23-.58-.46-1.66-.46-1.12 0-2.12.44t-1.79.95l-.84-1.51q.6-.39 1.39-.78.8-.4 1.73-.66.94-.27 1.99-.27q1.59 0 2.58.67q1 .68 1.47 1.86.47 1.19.47 2.82v8.02h-1.8l-.2-1.56h-.07q-.91.77-2 1.32t-2.32.55zM252.86 68.06q.93 0 1.78-.44.86-.43 1.79-1.27V62.73q-2.18.24-3.48.68-1.29.45-1.85 1.08-.55.64-.55 1.5q0 1.13.67 1.6.68.47 1.64.47zM266.15 69.83q-1.37 0-2.65-.51-1.28-.52-2.2-1.29l1.06-1.46q.86.69 1.78 1.13.91.43 2.08.43q1.3 0 1.94-.59.63-.59.63-1.45q0-.67-.44-1.12-.45-.44-1.13-.77-.68-.32-1.4-.58-.92-.36-1.79-.81-.88-.44-1.44-1.15-.57-.71-.57-1.81q0-1.06.53-1.89.53-.82 1.54-1.32q1.01-.49 2.42-.49q1.2 0 2.25.43q1.04.44 1.78 1.06l-1.05 1.37q-.67-.48-1.38-.82-.71-.33-1.57-.33-1.25 0-1.84.56t-.59 1.33q0 .6.4 1.01.39.41 1.04.68.65.28 1.37.57.72.26 1.43.57.71.32 1.27.75t.91 1.07q.35.63.35 1.57q0 1.05-.54 1.94t-1.58 1.41q-1.05.51-2.61.51zM274.89 64.22l-.31-10.18-.05-2.5h2.21l-.05 2.5-.29 10.18zM275.63 69.83q-.65 0-1.11-.47-.47-.46-.47-1.18q0-.77.47-1.23.46-.45 1.11-.45.67 0 1.13.45.46.46.46 1.23q0 .72-.46 1.18-.46.47-1.13.47z" fill="#f8fafc"/>
      </g>
    </g>
  </g>
</svg>

Canvas ​

Props ​

Example ​

Canvas

Props

Example