I want to show the id of the rectangle in the center of it.
Here is my model:
var rects = [
[a, 20, w, h, 'Day of the 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 an external link to the code: http://fiddle.jshell.net/c3538o0v/2/
I tried overlaying but that's not what I want. The question is what do I have to use to automatically put it in the center without going out the rectanglecenter the text within the rectangle?
PS: I have deleted the overlay code.
Code
var mydata = [{
"name": "Name: Name Day of the 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 a = 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 the 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']
];
for (var i = 0; i < rects.length; i++) {
canvas.height = canvas.height + 110;
ctx.fillStyle = "white";
ctx.clearRect(0, 0, canvas.width, canvas.height);
// rectangles opnieuw tekenen
for (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;
for (var i = 0; i < 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;
}
a 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>
