Extension to fillText for letter-spacing

Just a demo

HTML

<div id="container">
    <canvas id="canvas" width="300" height="100"></canvas>
    <div id="text">
        <p style="letter-spacing: 3px">David Hong</p>
        <p style="letter-spacing: 0; margin-top: 6px;">David Hong</p>
    </div>
</div>

CSS

#container { margin: 0; border: 1px dotted #ccc; padding: 0; width: 300px; height: 100px; position: relative; }
canvas { position: absolute; top: 0; left: 0; }
#text { position: absolute; top: 0; left; font: 10px Arial; color: red; display: block; width: 300px; }
#text p { margin: 8px 0 0 0; padding: 0; text-align: center; dispaly: block; }

JavaScript

/**
 * CanvasRenderingContext2D.renderText extension
 */
if (CanvasRenderingContext2D && !CanvasRenderingContext2D.renderText) {
    // @param  letterSpacing  {float}  CSS letter-spacing property
    CanvasRenderingContext2D.prototype.renderText = function (text, letterSpacing) {
        if (!text || typeof text !== 'string' || text.length === 0) {
            return;
        }
        
        if (typeof letterSpacing === 'undefined') {
            letterSpacing = 0;
        }
        
        // letterSpacing of 0 means normal letter-spacing
        
        var characters = String.prototype.split.call(text, ''),
            index = 0,
            current,
            currentPosition = x,
            align = 1;
        
       /*  if (this.textAlign === 'right') {
            characters = characters.reverse();
            align = -1;
        } else if (this.textAlign === 'center') {
            var totalWidth = 0;
            for (var i = 0; i < characters.length; i++) {
                totalWidth += (this.measureText(characters[i]).width + letterSpacing);
            }
            currentPosition = x - (totalWidth / 2);
        } */
        
       /*  while (index < text.length) {
            current = characters[index++];
            this.fillText(current, currentPosition, y);
            currentPosition += (align * (this.measureText(current).width + letterSpacing));
        } */
    }
}

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.textAlign = "center";
var x = (canvas.width / 2) + 3.5;
ctx.renderText('David Hong', x, canvas.height, 0);
ctx.renderText('David Hong', x, canvas.height - 19, 3);
ctx.renderText('David Hong', x, canvas.height - 40, 5);
ctx.renderText('David Hong', x, canvas.height - 61, 10);
ctx.renderText('David Hong', x, canvas.height - 82, 15);