<script>
  export let topText;
  export let leftText;
  export let rightText;
  export let bottomText;
  export let fontSize;

  import { onMount } from "svelte";
  let canvas;

  let sw = 512;
  let sh = 512;
  const pad = 32;

  function render(ctx) {
    ctx.lineWidth = 2;
    ctx.lineCap = 'round';
    ctx.fillStyle = '#999';
    ctx.strokeStyle = '#999';

    ctx.beginPath();
    ctx.moveTo(pad, sh/2);
    ctx.lineTo(sw - pad, sh/2);
    ctx.moveTo(sw/2, pad);
    ctx.lineTo(sw/2, sh - pad);
    ctx.stroke();

    ctx.font = fontSize + 'px Inter';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(topText, sw/2, pad/2);
    ctx.fillText(bottomText, sw/2, sh - pad/2);

    ctx.textBaseline = 'bottom';
    ctx.textAlign = 'left';
    ctx.fillText(leftText, pad/2, sh/2 - pad/4);
    ctx.textAlign = 'right';
    ctx.fillText(rightText, sw - pad/2, sh/2 - pad/4);
  }

  onMount(() => {
    const ctx = canvas.getContext('2d');

    canvas.style.width = '100%';
    canvas.style.height = '100%';
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetWidth;
    sw = canvas.width;
    sh = canvas.height;

    render(ctx);
  });
</script>

<canvas bind:this={canvas} id="canvas" width="512" height="512"></canvas>