Estoy tratando de renderizar un lienzo y dibujar un rectángulo usando svelte.js, pero no funciona si escribo el código de renderizado en el lado del componente.
Aquí está la reproducción REPL.
Funciona si muevo el código completo en Canvas.svelte a app.svelte.
App.svelte:
<script> import Canvas from './Canvas.svelte'; </script> <Canvas/>Lienzo.esbelto:
<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} />¿Alguien sabe la solución?
Gracias,
No encontré una razón de error, pero encontré la fuente:
onMount(() => { //... // this 2 lines cause silent error canvas.width = document.body.clientWidth; canvas.height = document.body.clientHeight; //... });Quítalos y verás el lienzo y rect