javascript - Keep Text Vertically Centered on Canvas -

The problem I have is that a user keeps the written text centered inside the canvas element. I have created a test environment to try and solve this issue, which I have provided with a Bela in this post. Here is my code:

HTML:

  Enter your text: & lt; Br / & gt; & Lt; Textarea id = "inputtextuser" onkeyup = "inputtextgo ()" name = "text" & gt; Enter your & lt; / Textarea & gt; enter the; & Lt; Br / & gt; TextBisline: & lt; Select ID = "InputTextBaseline" onchange = "InputTexto ()"; & Gt; & Lt; Option value = "alphabetical" & gt; Alphabet & lt; / Options & gt; & Lt; Option value = "top" & gt; Top & lt; / Option & gt; & Lt; Option value = "bottom" & gt; Bottom & lt; / Options & gt; & Lt; Option value = "medium" & gt; Medium & lt; / Options & gt; & Lt; Option value = "hanging" & gt; Hangs & lt; / Options & gt; & Lt; / Select & gt; & Lt; Br / & gt; & Lt; Canvas ID = "canvas 1" width = "300px" height = "200px" & gt; Your browser does not support HTML5 Canvas tags. & Lt; / Canvas & gt; & Lt; Br / & gt; & Lt; Div id = "textheightentered" & gt; & Lt; / Div & gt;   
 CSS:  
  canvas {boundary: solid 1px black; }   
 javascript / jquery:  
  // declare canvas var canvas1 = document.getElementById ('canvas1'); Context1 = canvas1.getContext ('2D'); // function running to update canvas inputtextgo (); Recovery of text entered by Function inputtextgo () {// user var inputtext = document.getElementById ("inputtextuser"). Value; // user var texthit = call function to calculate the height on text entered by fonttext (inputtext); // user var baseline = reclaim the baseline selected by getElementById ("InputTextLineLine"). value; // y y = 100 + textheight / 2 to focus the text based on the height of the text to calculate the new Y; // Updating canvas for new text entered by User Contact 1. Clearrack (0, 0, 300, 200); Context1.font = "36px Arial"; Context1.textBaseline = Baseline; Context1.fillText (InputText, 0, Y); // Drawing a line between the canvas for reference reference 1 .strokeStyle = "red"; Context1.moveTo (5,100); Context1.lineTo (290,100); Context1.stroke (); $ ("# Textheightentered") Text ("text height:" + texthit); } Function fontheight (text) {var canvas = document.createElement ("canvas"); Canvas.wind = 1000; Canvas.height = 200; Var ctx = canvas.getContext ("2D"); Function RouteTextHight (left, top, width, height, text) {// Draw text in the field ctx.save (); Ctx.clearRect (0,0, canvas.Wind, canvas.height); Ctx.baseline = "top"; Ctx.fillText (text, 0, 35); // It seems like long text ... is not it? Ctx.restore (); Get the pixel data from // canvas-work data = ctx.getImageData (left, top, width, height). Data, first = false, final = false, r = height, c = 0; // Find the last line with a non-white pixel, while (! Last & amp; R); (C = 0; c & lt; width; c ++) {if (data [r * width * 4 + c * 4 + 3]) {final = r; break; }}} // Find the first row with non-white pixels while (r) {r--; For {C = 0; C & lt; width; c ++} {if (data [r * width * 4 + c * 4 + 3]) {first = r; break; }} // If we got it then the height will be returned if (first! = R) returning finally - first; } // We spoiled something ... what do you expect from the free code? Return 0; } Ctx.font = "36px aerial"; Var height = Volume (0, 0, canvas. Width, canvas., Text, text); // string returns return the height of the height; } // and $ (function () {}); JSFiddle:  
 The issue I am coming to is that if the user enters a lower case "Y", for example the change in the height of the text changes and the text remains in the center of the canvas Due to the fact that the basic improvements made in y variables will need to be separated on the basis of the text recorded (short and uppercase letters) depending on the improvement in the y variables in the text below the baseline. Leave it Do not be.  
 This is where I get my problems because I want to keep the text centered around the canvas element every time. The only thing I can think of is to calculate the non-empty pixels beneath the TextBaseline reference point and then to use the difference from the baseline to the end of the text to offset the text to focus on the canvas I'm not sure How do you write this script or if it is possible, but this is the best way with which I came.  
 If someone has any ideas or guidance, then developing this approach to solve this issue will be highly appreciated as it has got stumped.   
 
 
 You can take a look at this. A text wrapper is used.