canvas-txt 5

by Geon George

HTML

<canvas id="mycanvas" width="500" height="500"></canvas>

CSS

#mycanvas {
  border: 1px solid black;
}

JavaScript

import { drawText } from 'https://unpkg.com/[email protected]/dist/index.js'

const ctx = document.getElementById('mycanvas').getContext('2d')

const { height, width, lines } = drawText(
  ctx,
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
  {
    x: 100,
    y: 150,
    width: 300,
    height: 200,
    fontSize: 24,
    debug: true, // draws the box + alignment guides
  }
)

console.log(`Drew ${lines.length} lines, ${Math.round(height)}px tall, ${Math.round(width)}px wide`)