konvajs/svelte-konva

npm i svelte-konva konva

<script>
  import { Stage, Layer, Rect } from 'svelte-konva';
</script>

<Stage width={1000} height={1000}>
  <Layer>
    <Rect x={100} y={100} width={400} height={200} fill="blue" />
  </Layer>
</Stage>

<script>
  import { Stage, Layer, Rect } from 'svelte-konva';

  function handleClick(e) {
    window.alert(`Clicked on rectangle: ${e.type}`);
  }
</script>

<Stage width={1000} height={1000}>
  <Layer>
    <Rect x={100} y={100} width={400} height={200} fill="blue" onpointerclick={handleClick} />
  </Layer>
</Stage>

<script>
  import { onMount } from 'svelte';
  import { Stage, Layer, Rect } from 'svelte-konva';

  let rectangle;

  onMount(async () => {
    const json = rectangle.node.toJSON();
    window.alert(`Rectangle as JSON: ${json}`);
  });
</script>

<Stage width={1000} height={1000}>
  <Layer>
    <Rect x={100} y={100} width={400} height={200} fill="blue" bind:this={rectangle} />
  </Layer>
</Stage>

<script>
  import { Stage, Layer, Rect } from 'svelte-konva';

  let rectX = $state(100);
  let rectY = $state(100);

  $effect(() => {
    console.log(`Rectangle was dragged. New x: ${rectX}. New y: ${rectY}.`);
  });
</script>

<Stage width={1000} height={1000}>
  <Layer>
    <Rect bind:x={rectX} bind:y={rectY} width={400} height={200} fill="blue" draggable />
  </Layer>
</Stage>

<script>
  import { browser } from '$app/environment';
  import { Stage, Layer, Rect } from 'svelte-konva';
</script>

{#if browser}
<Stage width="{1000}" height="{1000}">
  <Layer>
    <Rect x="{100}" y="{100}" width="{400}" height="{200}" fill="blue" />
  </Layer>
</Stage>
{/if}

<script>
  import { Stage, Layer, Rect } from 'svelte-konva';
  import OtherComponentUsingSvelteKonva from './OtherComponentUsingSvelteKonva.svelte';

  const rectangleConfig = {/*...*/};
</script>

<Stage width="{1000}" height="{1000}">
  <Layer>
    <Rect {...rectangleConfig} />

    <OtherComponentUsingSvelteKonva />
  </Layer>
</Stage>

<script>
  import { browser } from '$app/environment';

  const MyCanvas = browser
    ? import('./MyCanvas.svelte').then((module) => module.default)
    : new Promise(() => {});
</script>

<div>
  <p>This is my fancy server side rendered (or prerendered) page.</p>

  <!-- Use your dynamically imported svelte-konva canvas component once it becomes defined, you can pass any component props as usual -->
  {#await MyCanvas}
  <p>Loading...</p>
  {:then Component}
  <Component someProp="someString" />
  {:catch error}
  <p>Something went wrong: {error.message}</p>
  {/await}
</div>