Canvas rendering from component is not working on Svelte

Question

I'm trying to render canvas and draw rectangle on it using svelte.js, but it does not work if I write rendering code on the component side.

Here is the reproduction REPL.

It works if I move entire code in Canvas.svelte to app.svelte.

App.svelte:

<script>
    import Canvas from './Canvas.svelte';
</script>

<Canvas/>

Canvas.svelte:

<script>
  import { onMount } from 'svelte';

  let canvasEl;

  const canvas = {
    width: 1000,
    height: 1000
  };

  const drawRect = (context) => {
    context.beginPath();
    context.fillStyle = '#000000';
    context.rect(0, 0, 40, 10);
    context.fill();
  };

  onMount(() => {
    console.log('Onmount');
    const context = canvasEl.getContext('2d');
    canvas.width = document.body.clientWidth;
    canvas.height = document.body.clientHeight;
    drawRect(context);
  });
</script>

<canvas bind:this={canvasEl} width={canvas.width} height={canvas.height} />

Does anyone know the solution?

Thank you,

Answer 1

Didn't find a reason of error, but found the source:

onMount(() => {
    //...
    // this 2 lines cause silent error
    canvas.width = document.body.clientWidth;
    canvas.height = document.body.clientHeight;
    //...
  });

Remove them and you will see the canvas and rect