Realigning monospace bounding box and data

PFD prototype

by Jimmy Chandra

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<canvas id="canvas" width="595" height="842" style="background-color:#fff;border:solid 1px #ccc"></canvas>

JavaScript

String.prototype.ltrim=function() { return this.replace(/^\s+/,'');};
String.prototype.rtrim=function(){return this.replace(/\s+$/,'');};

var rs = 
[
    { 
        x1:  10, y1:  15, x2: 413, y2:  31, 
        font: 'Courier', fontColor: '#000000', fontSize: 16, 
        data: '                 PFD Food Services Pty Ltd'
    },
    
    { 
        x1:  10, y1: 360, x2: 580, y2: 369, 
        font: 'Courier', fontColor: '#000000', fontSize: 10, 
        data: '                                                                                          60.32'
    },    
    { 
        x1:  10, y1: 360, x2: 518, y2: 369, 
        font: 'Courier', fontColor: '#000000', fontSize:  9, 
        data: '                                                                                          0.00'
    },
    { 
        x1:  10, y1: 360, x2: 474, y2: 369, 
        font: 'Courier', fontColor: '#000000', fontSize:  9, 
        data: '                                                                                 60.32'
    },  
    { 
        x1:  10, y1: 360, x2: 415, y2: 369, 
        font: 'Courier', fontColor: '#000000', fontSize:  9, 
        data: '                                                                      30.16'
    },
    { 
        x1:  10, y1: 360, x2: 361, y2: 369, 
        font: 'Courier', fontColor: '#000000', fontSize:  9, 
        data: '                                                             2.00'
    },
    { 
        x1:  10, y1: 360, x2: 307, y2: 369, 
        font: 'Courier', fontColor: '#000000', fontSize:  9, 
        data: '                                                   2.00'
    },
    { 
        x1:  10, y1: 360, x2: 248, y2: 369, 
        font: 'Courier', fontColor: '#000000', fontSize:  9, 
        data: '                                          EA'
    },    
    { 
        x1:  10, y1: 360, x2: 226, y2: 369, 
        font: 'Courier', fontColor: '#000000', fontSize:  8, 
        data: '         20K JASMINE RICE CHEFS WORLD     ...