JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<canvas id="canTemp" width="4500" height="1500" style="display:none"></canvas>

JavaScript

var canvas = document.getElementById('canTemp');
var context = canvas.getContext("2d");
var options = {
	fontStyle: 'italic',
  fontVariant: 'none',
  fontWeight: 'bold',
  fontSize: '33',
  fontFamily: 'helvetica'
}

function getPixels(canvas, context, str, size, options) {
    context.fillStyle = "#000"
    context.fillRect(0, 0, canvas.width, canvas.height)

    if (options.throughout) {
        context.fillStyle = "#fff"
        context.fillRect(size/2, size/2, Math.ceil(context.measureText(str).width) + size, 2 * size)
    }

    var x = options.throughout ? size : size/2;

    if (options.stroke) {
        context.strokeStyle = options.throughout?"#000": "#fff"
        context.strokeText(str, x, x)
    } else {
        context.fillStyle = options.throughout ? "#000" : "#fff"
        context.fillText(str, x, x)
    }
    //Cut pixels from image
    var pixelData = context.getImageData(0, 0, canvas.width, canvas.height)
    var pixels = ndarray(pixelData.data, [canvas.height, canvas.width, 4])

    return pixels.pick(-1, -1, 0).transpose(1, 0)
}

function processPixels(pixels, options, size) {
    try {
        return processPixelsImpl(pixels, options, size, true)
    } catch (e) { }
    try {
        return processPixelsImpl(pixels, options, size, false)
    } catch (e) { }
    if (options.polygons || options.polyline || options.polygon) {
        return []
    }
    if (options.triangles || options.triangulate || options.triangle) {
        return {
            cells: [],
            positions: []
        }
    }
    return {
        edges: [],
        positions: []
    }
}

function processPixelsImpl(pixels, options, size, simplify) {
    //Extract contour
    var contour = getContour(pixels, simplify)

    //Apply warp to positions
    var positions = transformPositions(contour.positions, options, size)
    var edges = contour.edges
    var flip = "ccw" === options.orientation

    //Clean up the PSLG, resolve self intersections, etc.
   ...