Finding in the middle between two points

Question

I have a bunch of HTML elements that I want to link to lines through Canvas. Here is a layout of what I'm trying to achieve:

Currently I just have strings, no text. I want to place the text halfway between each line, but, seeing that these are diagonals, I am not sure how to do this.

Current code:

// 'connectors' is an array of points corresponding to // the middle of each big blue buttons' x-value ctx.clearRect(0,0,canvas.width,canvas.height); for(var i=0;i<connectors.length;i++){ var wpoint = connectors[i]; var pos1 = {w: wpoint, h: 0}; var pos2 = {w: canvas.width / 2, h: canvas.height}; ctx.beginPath(); ctx.moveTo(pos1.w,pos1.h); ctx.lineTo(pos2.w,pos2.h); ctx.stroke(); // Write Text Halfway ctx.fillStyle = "blue"; ctx.font = "bold 16px Arial"; ctx.fillText("2702", 100, canvas.height / 2); // No idea what to put as the x value here } 

What is the best way to achieve this? Potentially draw half a line, write text, and then draw the rest of the line?

EDIT . Perhaps the best heading / question would be: How do I find the midpoint between two arbitrary points in an HTML Canvas? I want to draw text there.

Answer 1

Here's how:

• Calculate the midpoint of the line
• Draw a line
• Delete the line at your midpoint
• Scan the canvas horizontally and vertically to center any drawn text around the specified [x, y]
• Draw the text at the midpoint

Here's the annotated code and demo:

 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var line={x0:20,y0:20,x1:150,y1:150}; textAtMidLine(line,'2702','verdana',14) function textAtMidLine(line,text,fontface,fontsize){ // save the unmodified context state ctx.save(); // calc line midpoint var midX=line.x0+(line.x1-line.x0)*0.50; var midY=line.y0+(line.y1-line.y0)*0.50; // calc width of text ctx.font=fontsize+'px '+fontface; var textwidth=ctx.measureText(text).width; // draw the line ctx.beginPath(); ctx.moveTo(line.x0,line.y0); ctx.lineTo(line.x1,line.y1); ctx.lineWidth=2; ctx.strokeStyle='lightgray'; ctx.stroke(); // clear the line at the midpoint ctx.globalCompositeOperation='destination-out'; // "erases" ctx.fillRect(midX-textwidth/2,midY-fontsize/2,textwidth,fontsize*1.286); ctx.globalCompositeOperation='source-over'; // reset to default // tell canvas to horizontally & vertically center text around an [x,y] ctx.textAlign='center'; ctx.textBaseline='middle' // draw text at the midpoint ctx.fillText(text,midX,midY); // restore the unmodified context state ctx.restore(); } 

 body{ background-color: ivory; } #canvas{border:1px solid red; margin:0 auto; } 

 <canvas id="canvas" width=300 height=300></canvas>