Related
I am trying to imitate 3d-model rotation with a sprite sheet. I found a perfect example on Codepen, but it was not responsive.
What I tried to do is to write divs, containers and spritesize (in script) in vw, and then it is being checked in the window.resize event. It does work, but unfortunately not DURING window resize.
I put my snippet and three pictures in the post —
I opened website and everything is perfect - image
I started to change the size of my browser window and as you can see something is wrong - image
Now I tried to "rotate" the "model" with resized window and all is fine again - image
var spriteslider = document.createElement('div');
var clientWidth = document.getElementById('spritetarget').clientWidth;
document.body.appendChild(spriteslider);
spriteslider.slider = document.getElementById('spriteslider');
spriteslider.sprite = document.getElementById('spritetarget');
spriteslider.spritesize = clientWidth;
spriteslider.spritecount = 20;
spriteslider.pixelsperincrement = 5;
spriteslider.multiplier = spriteslider.lastmultiplier = 0;
Draggable.create(spriteslider, {
type: 'x',
trigger: spriteslider.slider,
bounds: {
minX: 0,
maxX: 0,
minY: 0,
maxY: 0
},
edgeResistance: 0,
cursor: 'e-resize',
onDrag: function() {
if (this.isDragging) {
var t = this.target;
t.multiplier = Math.floor(this.x / t.pixelsperincrement) + t.lastmultiplier;
// TweenLite.set(t.sprite, { backgroundPosition: (-t.multiplier * t.spritesize) + "px 0"});
TweenLite.set(t.sprite, {
backgroundPosition: (-t.multiplier * t.spritesize) + "px 0"
});
}
},
onDragEnd: function() {
var t = this.target;
t.lastmultiplier = t.multiplier % t.spritecount;
}
});
window.addEventListener('resize', function(event) {
var clientWidth = document.getElementById('spritetarget').clientWidth;
spriteslider.spritesize = clientWidth;
TweenLite.set(t.sprite, {
backgroundPosition: (-t.multiplier * t.spritesize) + "px 0"
});
}, true);
body {
text-align: center;
font: normal 12px sans-serif;
background: #000000;
color: #91E600;
}
.spriteslider {
margin: 20px auto;
padding: 60px;
width: 20vw;
height: 20vw;
background: #FCFEFC;
border-radius: 5px;
}
#spritetarget {
width: 20vw;
height: 20vw;
background-size: cover;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/29123/heart.png);
/* horizontal spritesheet - image from http://preloaders.net */
background-repeat: repeat-x;
}
<div class='spriteslider' id='spriteslider'>
<div id='spritetarget'></div>
</div>
<p>Drag the box left/right to control the sprite's position.</p>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/utils/Draggable.min.js'></script>
The issue is because you're referencing t in the window.resize event handler, yet that variable has been defined in a different scope, and is not accessible from that location.
To fix this issue you can replace t in that function with the spriteslider variable, as that's what t is expected to contain. Try this:
var spriteslider = document.createElement('div');
var clientWidth = document.getElementById('spritetarget').clientWidth;
document.body.appendChild(spriteslider);
spriteslider.slider = document.getElementById('spriteslider');
spriteslider.sprite = document.getElementById('spritetarget');
spriteslider.spritesize = clientWidth;
spriteslider.spritecount = 20;
spriteslider.pixelsperincrement = 5;
spriteslider.multiplier = spriteslider.lastmultiplier = 0;
Draggable.create(spriteslider, {
type: 'x',
trigger: spriteslider.slider,
bounds: {
minX: 0,
maxX: 0,
minY: 0,
maxY: 0
},
edgeResistance: 0,
cursor: 'e-resize',
onDrag: function() {
if (this.isDragging) {
var t = this.target;
t.multiplier = Math.floor(this.x / t.pixelsperincrement) + t.lastmultiplier;
TweenLite.set(t.sprite, {
backgroundPosition: (-t.multiplier * t.spritesize) + "px 0"
});
}
},
onDragEnd: function() {
var t = this.target;
t.lastmultiplier = t.multiplier % t.spritecount;
}
});
window.addEventListener('resize', function(event) {
var clientWidth = document.getElementById('spritetarget').clientWidth;
spriteslider.spritesize = clientWidth;
TweenLite.set(spriteslider.sprite, {
backgroundPosition: (-spriteslider.multiplier * spriteslider.spritesize) + "px 0"
});
}, true);
body {
text-align: center;
font: normal 12px sans-serif;
background: #000000;
color: #91E600;
}
.spriteslider {
margin: 20px auto;
padding: 60px;
width: 20vw;
height: 20vw;
background: #FCFEFC;
border-radius: 5px;
}
#spritetarget {
width: 20vw;
height: 20vw;
background-size: cover;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/29123/heart.png);
/* horizontal spritesheet - image from http://preloaders.net */
background-repeat: repeat-x;
}
<div class='spriteslider' id='spriteslider'>
<div id='spritetarget'></div>
</div>
<p>Drag the box left/right to control the sprite's position.</p>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/utils/Draggable.min.js'></script>
So I want to recreate this simple animation effect, which uses a <canavs> :
https://codepen.io/w3devcampus/pen/PpLLKY
HTML:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Draw a monster in a canvas</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
</body>
</html>
JavaScript:
function mainLoop() {
ctx.clearRect(0, 0, w, h);
drawMyMonster(xMonster, yMonster);
xMonster += monsterSpeed;
if (((xMonster + 100)> w) || (xMonster < 0)) {
monsterSpeed = -monsterSpeed;
}
}
function drawMyMonster(x, y) {
ctx.save();
ctx.translate(x, y);
ctx.strokeRect(0, 0, 100, 100);
ctx.fillRect(20, 20, 10, 10);
ctx.fillRect(65, 20, 10, 10);
ctx.strokeRect(45, 40, 10, 40);
ctx.strokeRect(35, 84, 30, 10);
ctx.fillRect(38, 84, 10, 10);
ctx.fillRect(52, 84, 10, 10);
ctx.restore();
}
So, I did recreate it, but it wouldn't behave normally. Instead of displaying one frame at a time, it stacks all the frames up each other in the canvas. Here's my version:
https://codepen.io/Undefined_Variable/pen/LraLJQ
HTML:
<html>
<head>
<title>CanvasThingy</title>
</head>
<body>
<canvas id="CanvasForMonster">
No support for you scrub!
</canvas>
</body>
</html>
JavaScript:
var myCanvas, context, w, h;
var xMonster = 60;
var yMonster = 30;
var monsterSpeed = 1;
window.onload = function initial(){
myCanvas = document.body.querySelector('#CanvasForMonster');
w = myCanvas.style.width;
h = myCanvas.style.height;
context = myCanvas.getContext('2d');
ClearCanvas();
}
function ClearCanvas(){
context.clearRect(0, 0, w, h);
DrawFMLface(xMonster, yMonster);
xMonster += monsterSpeed;
if(((xMonster + 175) > 299) || (xMonster < 0) ){
monsterSpeed = -monsterSpeed;
}
requestAnimationFrame(ClearCanvas);
}
function DrawFMLface(x, y){
context.save();
context.translate(x, y);
context.strokeRect(0, 4, 175, 80);
context.strokeStyle = 'black';
context.fillRect(40, 10, 20, 20);
context.strokeStyle = 'black';
context.fillRect(110, 10, 20, 20);
context.strokeStyle = 'black';
context.strokeRect(85, 40, 1, 15);
context.strokeStyle = 'black';
context.strokeRect(42, 70, 90, 0);
context.strokeStyle = 'black';
context.restore();
}
Please tell me how to do this properly without jQuery AT ALL, please. I'm still learning and I don't want any jQuery/Angular/React etc. in my code, please!
Your problem is that the previous faces are not being cleared. The clearing is supposed to be done with this line:
ctx.clearRect(0, 0, w, h);
The problem is that w and h are not set correctly when this is run, so not enough of the canvas is cleared.
This is where you set w and h:
w = myCanvas.style.width;
h = myCanvas.style.height;
This will only work if the width and height were set with CSS, e.g. with an HTML attribute style="width: 200px; height: 200px;", and if you called parseInt to convert the CSS style strings into numbers. But in fact the canvas element’s width and height were set with width and height HTML attributes directly. So you should set w and h with HTMLCanvasElement’s width and height properties:
w = canvas.width;
h = canvas.height;
The original Codepen sets them this way.
Just in case you were looking for a possibly easier way to do this, you can actually avoid JavaScript entirely when creating a simple animation like this by using CSS animations:
#CanvasForMonster {
position: relative;
width: 200px;
height: 200px;
border: 1px solid #000;
}
#Monster {
position: absolute;
top: 25%;
width: 50%;
height: 50%;
animation: bounce 2s alternate linear infinite;
}
#keyframes bounce {
from { left: 0; }
to { left: 50%; }
}
#Monster div {
position: absolute;
}
#Monster .stroke {
border: 1px solid #000;
}
#Monster .fill {
background-color: #000;
}
#Monster .head {
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#Monster .eye {
width: 10%;
height: 10%;
}
#Monster .eye-left {
left: 25%;
top: 25%;
}
#Monster .eye-right {
left: 65%;
top: 25%;
}
#Monster .nose {
left: 50%;
top: 50%;
width: 1px;
height: 10%;
}
#Monster .mouth {
left: 25%;
top: 75%;
width: 50%;
height: 0;
}
<div id="CanvasForMonster">
<div id="Monster">
<div class="stroke head"></div>
<div class="fill eye eye-left"></div>
<div class="fill eye eye-right"></div>
<div class="stroke nose"></div>
<div class="stroke mouth"></div>
</div>
</div>
Everything you have is alright.
The problem is your Globals.
The width of the canvas should be set to:
w = myCanvas.width;
Height set to:
h = myCanvas.height;
You have both set as:
w = myCanvas.style.width;
h = myCanvas.style.height;
Which will not work.
Here is the fork (Demo).
I would highly recommend using JQuery when working with canvas.
When using canvas it should be noted that you want too reference canvas.height, and canvas.width as much as possible rather then using a global that points at the height, and width of the css style.
My code is forking this pen, I also include my code in the stack snippet under this post.
what I want to achieve are:
When the cursor is not inside the body, the eyeball would move randomly ( achieved ).
When the cursor enters the body, the eyeball follows the cursor ( achieved ).
When the cursor leaves the body, the eyeball starts moving randomly again ( not achieved ).
I called the function which is used to move the eyeball randomly in on("mouseleave") event, and it does move to a random position but it will immediately go back to the last cursor position, rather than staying at the new position. Can anyone point me to the right direction to fix the problem?
Thanks!
var
mouseOvering = false,
pupil = $("#pupil"),
eyeball = $("#iris"),
eyeposx = 40,
eyeposy = 20,
r = $(pupil).width()/2,
center = {
x: $(eyeball).width()/2 - r,
y: $(eyeball).height()/2 - r
},
distanceThreshold = $(eyeball).width()/2 - r,
mouseX = 0,
mouseY = 0;
$("body").ready( function(){
if ( !mouseOvering ) {
moveRandomly();
}
});
$("body").on('mouseleave', function(){
mouseOvering = false;
moveRandomly();
console.log("mouseleave");
});
$("body").on('mousemove', function(e){
mouseOvering = true;
console.log("mouseovering");
followCursor(e);
});
function moveRandomly() {
var loop = setInterval(function(){
var xp = Math.floor(Math.random()*80);
var yp = Math.floor(Math.random()*80);
pupil.animate({left:xp, top:yp});
}, 3500);
}
function followCursor(e) {
var d = {
x: e.pageX - r - eyeposx - center.x,
y: e.pageY - r - eyeposy - center.y
};
var distance = Math.sqrt(d.x*d.x + d.y*d.y);
if (distance < distanceThreshold) {
mouseX = e.pageX - eyeposx - r;
mouseY = e.pageY - eyeposy - r;
} else {
mouseX = d.x / distance * distanceThreshold + center.x;
mouseY = d.y / distance * distanceThreshold + center.y;
}
var xp = 0, yp = 0;
var loop = setInterval(function(){
// change 1 to alter damping/momentum - higher is slower
xp += (mouseX - xp) / 1;
yp += (mouseY - yp) / 1;
pupil.css({left:xp, top:yp});
}, 2);
}
body {
background-color: #D1D3CF;
}
#container {
display: inline;
height: 400px;
width: 400px;
}
#eyeball {
background: radial-gradient(circle at 100px 100px, #EEEEEE, #000);
height: 300px;
width: 300px;
border-radius: 100%;
position: relative;
}
#iris {
top: 10%;
left: 10%;
background: radial-gradient(circle at 100px 100px, #4DC9EF, #000);
height: 80%;
width: 80%;
border-radius: 100%;
position: absolute;
}
#pupil {
top: 10%;
left: 10%;
background: radial-gradient(circle at 100px 100px, #000000, #000);
height: 55%;
width: 55%;
border-radius: 100%;
position: absolute;
}
#keyframes move {
50% {
transform: translate(-50px, 50px);
}
}
#keyframes move2 {
50% {
transform: translate(-20px, 20px);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="eyeball">
<div id="iris">
<div id="pupil"></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
With Javascript you can only track where the cursor is on the webpage. If you shift your cursor outside the body, it's not possible for your code to know where the cursor is.
This is the reason the eye tracking your cursor stops moving when you move your cursor outside the window.
The problem is that once the followcursor function was started it kept on moving back to the last known mouse position, even after the mouse had left the body. I just put a check on your mouseOvering variable inside your followcursor function:
var
mouseOvering = false,
pupil = $("#pupil"),
eyeball = $("#iris"),
eyeposx = 40,
eyeposy = 20,
r = $(pupil).width()/2,
center = {
x: $(eyeball).width()/2 - r,
y: $(eyeball).height()/2 - r
},
distanceThreshold = $(eyeball).width()/2 - r,
mouseX = 0,
mouseY = 0;
$("body").ready( function(){
if ( !mouseOvering ) {
moveRandomly();
}
});
$("body").on('mouseleave', function(){
mouseOvering = false;
console.log("mouseleave");
});
$("body").on('mousemove', function(e){
mouseOvering = true;
console.log("mouseovering");
followCursor(e);
});
function moveRandomly() {
var loop = setInterval(function(){
var xp = Math.floor(Math.random()*80);
var yp = Math.floor(Math.random()*80);
if (!mouseOvering) {
pupil.animate({left:xp, top:yp});
}
}, 3500);
}
function followCursor(e) {
var d = {
x: e.pageX - r - eyeposx - center.x,
y: e.pageY - r - eyeposy - center.y
};
var distance = Math.sqrt(d.x*d.x + d.y*d.y);
if (distance < distanceThreshold) {
mouseX = e.pageX - eyeposx - r;
mouseY = e.pageY - eyeposy - r;
} else {
mouseX = d.x / distance * distanceThreshold + center.x;
mouseY = d.y / distance * distanceThreshold + center.y;
}
var xp = 0, yp = 0;
var loop = setInterval(function(){
// change 1 to alter damping/momentum - higher is slower
xp += (mouseX - xp) / 1;
yp += (mouseY - yp) / 1;
if (mouseOvering) {
pupil.css({left:xp, top:yp});
}
}, 2);
}
body {
background-color: #D1D3CF;
}
#container {
display: inline;
height: 400px;
width: 400px;
}
#eyeball {
background: radial-gradient(circle at 100px 100px, #EEEEEE, #000);
height: 300px;
width: 300px;
border-radius: 100%;
position: relative;
}
#iris {
top: 10%;
left: 10%;
background: radial-gradient(circle at 100px 100px, #4DC9EF, #000);
height: 80%;
width: 80%;
border-radius: 100%;
position: absolute;
}
#pupil {
top: 10%;
left: 10%;
background: radial-gradient(circle at 100px 100px, #000000, #000);
height: 55%;
width: 55%;
border-radius: 100%;
position: absolute;
}
#keyframes move {
50% {
transform: translate(-50px, 50px);
}
}
#keyframes move2 {
50% {
transform: translate(-20px, 20px);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="eyeball">
<div id="iris">
<div id="pupil"></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
I have one image and had a circle(drawn using css3) in it.
Now when I zoom in/out the image, I want to keep the position of the circle at the same location in the image, so that when image zoom in/out the circle will translate, but I am unable how to calculate the co-ordinates by which I need to translate the circle on image zoom in/out. Any suggestion!!
The image and the circle are the sibling elements in HTML
It took me a while but I wrote something that can be used with <img> tag and another element with position:absolute;.
$(document).ready(function() {
function setDimentions(first) {
IW = $('.img_container img').width();
IH = $('.img_container img').height();
PW = $('.pointer').outerWidth();
PH = $('.pointer').outerHeight();
pointerL = Number($('.pointer').css('left').replace('px', ''));
pointerT = Number($('.pointer').css('top').replace('px', ''));
if (first) {
Lperc = pointerL * 100 / IW;
Tperc = pointerT * 100 / IH;
Wperc = PW * 100 / IW;
Hperc = PH * 100 / IH;
}
Lpx = Lperc * IW / 100;
Tpx = Tperc * IH / 100;
Wpx = Wperc * IW / 100;
Hpx = Hperc * IH / 100;
}
setDimentions(true);
$(window).on('resize', function() {
setDimentions();
$('.pointer').css({
'width': Wpx,
'height': Hpx,
'top': Tpx,
'left': Lpx
})
})
});
* {
margin: 0;
box-sizing: border-box;
}
.img_container {
width: 80%;
margin: 0 10%;
position: relative;
}
img {
max-width: 100%;
}
.pointer {
width: 30px;
height: 30px;
border-radius: 999px;
border: thin solid red;
position: absolute;
left: 35%;
top: 16%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img_container">
<img src="http://i.imgur.com/XXxgr7xg.jpg">
<div class="pointer">
</div>
</div>
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>
This works (fiddle):
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']
];
canvas.height = 110 * rects.length;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.textAlign="center";
ctx.textBaseline = 'middle';
for (var i = 0; i < 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:
The size of the canvas changed all the time
You cleared the canvas in the outer loop, erasing all the rects that you had rendered so far
New stuff: Setting the text alignment to center it around a point (in this case, the center of he rectangle).
After that, I just had to set the text color to black and 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 an HTML5 canvas