javascript - HTML5: Center text within rectangle -

i want show id of rectangle in center of it.

here model:

var rects = [     [a,  20, w, h, 'day of week'],     [a, 130, w, h, 'final'],     [a, 240, w, h, 'direction'],     [a, 350, w, h, 'goss'],     [a, 460, w, h, 'cyber'],     [a, 570, w, h, 'ultumate77'],     [a, 680, w, h, 'ami'],     [a, 790, w, h, 'testfaseparttwo'],     [a, 900, w, h, 'herhavzundibiayni'] ]; 

here external link code: http://fiddle.jshell.net/c3538o0v/2/

i tried overlaying that's not want. question have use automatically put in center without going out rectanglecenter text within rectangle?

ps: have deleted overlay code.

code

var mydata = [{    "name": "name: name day of week",    "version": "version: 1.0.0",    "localtimezone": "local time zone: cet",    "country": "country: nld",    "input": "input: datetime (format see properties)<br>\n\  current date time = system date time <br>\n\  node enabled = y/n (default yes) <br>\n\  language = en (default en)",    "properties": "properties: datetime format = iso 8601 (default)<br> \n\  current date time = system date time<br>\n\  countryarea = +31 (nld)<br>\n\  time zone = cet (depends on country/area)<br>\n\  daylight saving = y/n<br>\n\  dst starts = (depends on country/area)<br>\n\  dst ends = (depends on country/area)"    }, {    "name": "final",    "text": "1001",    "version": "1.2",    "country": "nl"    }, {    "name": "direction",    "text": "lucben",    "version": "1.5.8",    "country": "cn"    }, {    "name": "goss",    "text": "55",    "version": "5",    "country": "be"    }, {    "name": "cyber",    "text": "kroon",    "version": "3.2.11",    "country": "fr"    }, {    "name": "ultumate77",    "text": "nei",    "version": "22",    "country": "d"    }, {    "name": "ami",    "text": "da",    "version": "1.0.0",    "country": "vs"    }, {    "name": "testfaseparttwo-one",    "text": "99ft22",    "version": "0.0.1",    "country": "ch"    }, {    "name": "herhavzundibiayni",    "text": "gittebag",    "version": "1",    "country": "tr"    }, {    "name": "spyh",    "text": "500",    "version": "1.1.1.1",    "country": "beneluxs"    }];    var = 20;  var w = 150;  var h = 100;  var canvas = $('#nodelist').get(0);  var ctx = canvas.getcontext('2d');    canvas.height = 0;    var rects = [    [a, 20, w, h, 'day of week'],    [a, 130, w, h, 'final'],    [a, 240, w, h, 'direction'],    [a, 350, w, h, 'goss'],    [a, 460, w, h, 'cyber'],    [a, 570, w, h, 'ultumate77'],    [a, 680, w, h, 'ami'],    [a, 790, w, h, 'testfaseparttwo'],    [a, 900, w, h, 'herhavzundibiayni']  ];    (var = 0; < rects.length; i++) {    canvas.height = canvas.height + 110;    ctx.fillstyle = "white";    ctx.clearrect(0, 0, canvas.width, canvas.height);      // rectangles opnieuw tekenen    (var j = 0; j < i; j++) {      ctx.fillrect(rects[j][0],                   rects[j][1],                   rects[j][2],                   rects[j][3]);    }      ctx.fillrect(rects[i][0],                 rects[i][1],                 rects[i][2],                 rects[i][3]);  }    $('#nodelist').click(function(e) {    var x = e.offsetx,        y = e.offsety;      (var = 0; < rects.length; i++) {      if (x > rects[i][0] && x < rects[i][0] + rects[i][2] &&          y > rects[i][1] && y < rects[i][1] + rects[i][3]) {        var canvas = document.getelementbyid('nodedisplay');        var context = canvas.getcontext('2d');        var imageobj = new image();          imageobj.onload = function() {          context.drawimage(imageobj, 0, 0);        };        imageobj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';          $(".een").empty().append(mydata[i].name + '<br> ' + mydata[i].version + (mydata[i].localtimezone ? '<br> ' + mydata[i].localtimezone : "") + '<br> ' + mydata[i].country);          $(".twee").empty().append(mydata[i].input);          $(".vier").empty().append(mydata[i].properties);      }    }  });

html,  body {    height: 100%;    overflow: hidden;    background-color: grey;  }  b {    margin-left: 75px;  }  #container {    margin-left: auto;    margin-right: auto;    text-align: center;  }  img {    border: none;  }  .scrollbar {    height: 1050px;    border: 1px solid #000;    overflow-y: auto;    overflow-x: hidden;    position: fixed;  }  .content {    width: auto;    height: 100%;  }  #display {    float: left;    margin-left: 248px;  }  .beeld {    max-height: 301px;    min-height: 301px;    width: 600px;    margin-left: 134px;    overflow-y: auto;    overflow-x: auto;    position: absolute;    text-align: center;  }  #nodedisplay {    float: left;    height: 300px;    width: 600px;    margin-left: 133px;  }  #canvas-wrap {    position: fixed;    margin-left: 380px;    float: left;    position: fixed;    margin-top: 435px;  }  #canvas-wrap canvas {    position: absolute;    top: 0;    left: 0;    z-index: 0  }  .een {    height: 120px;    min-height: 150px;    width: 600px;    overflow-y: auto;    overflow-x: auto;    position: relative;  }  .twee {    height: 120px;    min-height: 150px;    width: 600px;    overflow-y: auto;    overflow-x: auto;    position: relative;  }  .drie {    max-height: 70px;    min-height: 150px;    width: 600px;    position: relative;    overflow-y: auto;    overflow-x: auto;  }  .vier {    max-height: 70px;    min-height: 145px;    max-width: 600px;    width: 600px;    overflow-y: auto;    overflow-x: auto;    position: relative;  }

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>    <b>nodes</b>  <br>  <div class="scrollbar">    <div class="content">      <canvas id="nodelist" width="200" height="300">      </canvas>    </div>  </div>  <div class="display" id="display">    <canvas id="nodedisplay" width="300" height="300" style="border:2px solid black;"></canvas>    <div id="overlaybeeld"></div>    <div class="beeld" style="border:1px solid black;"></div>  </div>  <div id="canvas-wrap">    <canvas width="600" height="600" style="border:2px solid black;"></canvas>    <div id="overlay"></div>    <div class="een" style="border:1px solid black;"></div>    <div class="twee" style="border:1px solid black;"></div>    <div class="drie" style="border:1px solid black;"></div>    <div class="vier" style="border:1px solid black;"></div>  </div>

this works (fiddle):

var rects = [     [a, 20, w, h, 'day of week'],     [a, 130, w, h, 'final'],     [a, 240, w, h, 'direction'],     [a, 350, w, h, 'goss'],     [a, 460, w, h, 'cyber'],     [a, 570, w, h, 'ultumate77'],     [a, 680, w, h, 'ami'],     [a, 790, w, h, 'testfaseparttwo'],     [a, 900, w, h, 'herhavzundibiayni'] ];  canvas.height = 110 * rects.length; ctx.clearrect(0, 0, canvas.width, canvas.height);  ctx.textalign="center"; ctx.textbaseline = 'middle'; (var = 0; < rects.length; i++) {     ctx.fillstyle="white";     ctx.fillrect(rects[i][0],         rects[i][1],         rects[i][2],         rects[i][3]);     ctx.fillstyle="black";     ctx.filltext(rects[i][4], rects[i][0]+rects[i][2]/2, rects[i][1]+rects[i][3]/2); } 

your code had several bugs:

1. the size of canvas changed time
2. you cleared canvas in outer loop, erasing rects had rendered far

new stuff: setting text alignment center around point (in case, center of rectangle).

after that, had set text color black , call

ctx.filltext(rects[i][4], rects[i][0]+rects[i][2]/2, rects[i][1]+rects[i][3]/2); 

related:

• center (proportional font) text in html5 canvas