JSFiddle - React, Tailwind, and code Playground

Prototype of monospace unstitching

by Jimmy Chandra

HTML

<canvas id="canvas" width="1100" height="480" style="background-color:#ccc"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

var text = "693785     CABBAGE GREEN FOODSERVICE                    4115    AU        1  EACH          2.50                              2.50";


ctx.font = '7pt Courier';

var m = ctx.measureText(text);

ctx.fillStyle = '#ffffff';
ctx.fillRect(10,10,m.width,18);

ctx.fillStyle = '#000000';
ctx.fillText(text, 10, 10);

var cw = m.width / text.length;
console.log(cw);

var i,c, l = text.length;

var r = [];
var cX1 = 10;
    
for(i = 0; i < l; i++)
{
    c = text[i];
    var o = {
        x1 : cX1, 
        y1: 30, 
        x2: cX1 + cw - 1, 
        y2: 38, 
        data: c
    };
    r.push(o);
    cX1 += cw;    
}

console.log(r);

l = r.length;
for (i = 0; i < l; i++)
{
    ctx.fillStyle = "#cccccc";
    ctx.strokeRect(r[i].x1, r[i].y1, r[i].x2 - r[i].x1 + 1, r[i].y2 - r[i].y1 + 1);
    ctx.fillStyle = "#ff0000";
   ctx.fillText(r[i].data, r[i].x1, r[i].y1);
}