HTML5 canvas text-alignment

How to align text and draw labels through HTML5

by DominoPivot

HTML

<canvas id="myCanvas" width="200" height="200"></canvas>
<br />
<input id="myText" type="text" value="Example" />

CSS

body, html {
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255)
}
canvas {
    outline: solid 1px rgb(192, 192, 192);
    background-color: rgb(248, 248, 248);
}
input {
    width: 200px;
    border: none;
    outline: solid 1px rgb(192, 192, 192);
    padding: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    height: 12pt;
}

JavaScript

//==== initialize globals and canvas ====//

var textHeight = 15;
var padding = {x: 5, y: 5};
input = document.getElementById("myText");

canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
context.font = textHeight + "px Arial";
context.lineWidth = 2;
context.lineJoin = "round";
context.lineCap = "round";


//==== functions ====//

function relativeToCanvas(pageX, pageY) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: pageX - rect.left - document.body.scrollLeft,
        y: pageY - rect.top - document.body.scrollTop
    };
}

function clearCanvas() {
    context.save();
    context.setTransform(1, 0, 0, 1, 0, 0);
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.restore();
}

function drawLabel(e) {
    clearCanvas();
    context.save();

    var cursor = relativeToCanvas(e.pageX, e.pageY);
    var text = input.value;
    var textWidth = context.measureText(text).width;
    
    context.fillStyle = "#404040";
    context.strokeStyle = "#A000A0";
    context.fillRect(cursor.x, cursor.y - textHeight - padding.y*2, textWidth + padding.x*2, textHeight + padding.y*2);
    context.strokeRect(cursor.x, cursor.y - textHeight - padding.y*2, textWidth + padding.x*2, textHeight + padding.y*2);
    context.fillStyle = "#FFFFFF";
    context.fillText(text, cursor.x + padding.x, cursor.y - padding.y)
    
    context.restore();
}

//==== events ====//

canvas.addEventListener("mouseover", function (e) {
    canvas.addEventListener("mousemove", drawLabel);
});

canvas.addEventListener("mouseout", function (e) {
    canvas.removeEventListener("mousemove", drawLabel);
    clearCanvas();
});