How can I find center position coordinates of text which created by canvas?

Question

I want to find center position coordinates of text which created by canvas dynamically. For example, I want to find the x and y coordinates of the center of the number 2 text which written 600px with arial font-family, at 50px intervals. Example:

HTML

<canvas id="myCanvas"></canvas>

JS

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.font = "600px Arial";             // ** Font family and Font-Size Changeable
ctx.fillText('2',10,450);             // ** Number Changeable

jsfiddle

Text, font-family, and font-size changeable dynamically. How can I find center position coordinates

Answer 1

It actually depends on how you define the "center position" of a text. An approach could be to search for certain pixels that define the bounding-box of the text. This bounding-box is always a rectangle that has edges respectively min/max coordinates in each dimension (x, y).

So the center of a text could be defined as the center of this bounding-box. This is what getCenterCoordsFromText does, it returns centered x/y-coordinates based on the coordinate-system of the bounding-box or of the whole canvas.

 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#000000"; ctx.font = "100px Arial"; ctx.fillText("2", 14, 92); function getCenterCoordsFromText(colors, relativeToCanvas) { var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); var data = imageData.data; var minX = Infinity; var minY = Infinity; var maxX = 0; var maxY = 0; for (var i = 0; i < data.length; i += 4) { var x = (i / 4) % canvas.width; var y = Math.floor((i / 4) / canvas.width); var pixelFound = data[i] === colors.red && data[i + 1] === colors.green && data[i + 2] === colors.blue && data[i + 3] === colors.alpha; if (pixelFound) { if (minY > y) { minY = y; } if (maxY < y) { maxY = y; } if (minX > x) { minX = x; } if (maxX < x) { maxX = x; } } } var middleX = (maxX - minX) / 2; var middleY = (maxY - minY) / 2; return { x: (relativeToCanvas ? minX : 0) + middleX, y: (relativeToCanvas ? minY : 0) + middleY, offsetX: relativeToCanvas ? minX : 0, offsetY: relativeToCanvas ? minY : 0 } } // get locally centered coordinates within bounding-box var relToCanvasCoordSystem = false; var letterCoordRelToBox = getCenterCoordsFromText({ red: 0, green: 0, blue: 0, alpha: 255 }, relToCanvasCoordSystem); document.getElementById("relBoundingBoxCoord").innerHTML = 'x: ' + letterCoordRelToBox.x + ' y: ' + letterCoordRelToBox.y; // get globally centered coordinates of the bounding-box based on the whole canvas relToCanvasCoordSystem = true; var letterCoordRelToCanvas = getCenterCoordsFromText({ red: 0, green: 0, blue: 0, alpha: 255 }, relToCanvasCoordSystem); document.getElementById("relCanvasCoord").innerHTML = 'x: ' + letterCoordRelToCanvas.x + ' y: ' + letterCoordRelToCanvas.y; // draw a colored reference for bounding-box-coordinates-system note function drawBoundingBox(offsetX, offsetY, width, height){ ctx.beginPath(); ctx.strokeStyle = "#FF0000"; ctx.moveTo(offsetX, offsetY); ctx.lineTo(offsetX + width, offsetY); ctx.stroke(); ctx.lineTo(offsetX + width, offsetY + height); ctx.stroke(); ctx.lineTo(offsetX, offsetY + height); ctx.stroke(); ctx.lineTo(offsetX, offsetY); ctx.stroke(); } var offsetX = letterCoordRelToCanvas.offsetX; var offsetY = letterCoordRelToCanvas.offsetY; var boxWidth = letterCoordRelToBox.x*2; var boxHeight = letterCoordRelToBox.y*2; drawBoundingBox(offsetX, offsetY, boxWidth, boxHeight); 

 canvas { border: 1px solid #a3a3a3; } .bbcs{ color: red; } .ccs{ color: #a3a3a3; } 

 <p>relative to <span class="bbcs">bounding-box-coordinate-system</span>:</p> <div id="relBoundingBoxCoord"></div> <p>relative to <span class="ccs">canvas-coordinate-system</span>:</p> <div id="relCanvasCoord"></div> <br/> <canvas id="canvas" height="100" width="100"></canvas>