Fabric.js / fabricjs in Svelte, is there any workaround? - html5-canvas

Question

I have tried this code in REPL but couldn't find any working example. I am trying to free drawing on canvas using fabric pencil brush, however, this is only a rectangle:
<script>
const fabric = () => {
fabric = new window.fabric();
}
function drawMD(){
let canvas = new fabric.Canvas('c')
let rect = new fabric.Rect({
left:150, top, 150, fill: 'red, width: 200, height: 200, angle: 45
})
canvas.add(rect)
}
</script>
<svelte:head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/500/fabric.min.js" on:load={fabric}></script>
</svelte:head>
<div className="MarkdownEditor">
<canvas id="c" width="600" height="600" style="border:1px solid #000000;" on:click={drawMD}>
</canvas>
</div>

Answer 1

You don't need the window part, there are some typos in the Rect object and className won't work in Svelte. If you want to directly draw without having to click on the canvas, you can do this inside onMount. Here's a working REPL
(when opening the REPL there might be an errorfabric is not defined - just move the <svelte:head> one line down, then it's working...)
<svelte:head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/500/fabric.min.js"></script>
</svelte:head>
<script>
import {onMount} from 'svelte'
onMount(() => {
let canvas = new fabric.Canvas('c2')
let rect = new fabric.Rect({
left:120, top: 10, fill: 'teal', width: 150, height: 150, angle: 45
})
canvas.add(rect)
})
function drawMD(){
let canvas = new fabric.Canvas('c')
let rect = new fabric.Rect({
left:120, top: 10, fill: 'red', width: 150, height: 150, angle: 45
})
canvas.add(rect)
}
</script>
<div class="MarkdownEditor">
<canvas id="c" width="250" height="250" style="border:1px solid #000000;" on:click={drawMD}></canvas>
</div>
<canvas id="c2" width="250" height="250" style="border:1px solid #000000;"></canvas>