harryli0088

/**
 * this function dynamically fills text on canvas on multiple lines
 * since canvas does not have a built-in function to do this
 * NOTE this function will naively try to squeeze all the text into the provided bounds by
 * 1. using the "width" param as an argument to the fillText "maxWidth" optional param
 * 2. evenly spacing out the lines in the bounds, regardless of font size
 * Algorithm:
 * Step 1: split "text" by any white space into an array of words
 * Step 2: dynamically determine which words can be filled on which lines, similar DIVs automatically wrap text
 * Step 3: fill each line as its own text and vertically space out each line

harryli0088

<script lang="ts">
  import { onDestroy } from 'svelte'
  import { tweened } from 'svelte/motion'
  import { cubicOut } from 'svelte/easing'
  import { scaleLinear } from "d3-scale"
  const DEG_PER_RAD:number = 180/Math.PI

  export let fullWidth:number = 500
  $: centeredWidth = Math.min(500, fullWidth)
  $: fullHeight = centeredWidth