We Keep Coding

Div with sprite-animation doesn't change properly during window.resize event

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>

How to animate properly in a <canvas>?

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.

FabricJS add looped images to group programmatically

I have a set of letters. A word is built form these letters. I loop through the data ids to build the word.
However I cannot seem to group them together.
If I manually select the letters and try
canvas.getActiveObject().toGroup();
canvas.requestRenderAll();
It will group them together.
But I need to do this programatically and when I add
canvas.add(img).setActiveObject();
it will only select the last object added to the canvas.
Here is my function to build the word
function buildImage(i) {
var wordo = jQuery('*[data-id="' + wordArray[i] + '"]').attr('src');
fabric.Image.fromURL(wordo, function(img, letterWidth) {
// fabric.Image.fromURL(tiles[i], function (img) {
img.scale(scaleO).set({
left: offset[i],
top: wordPositionY,
selectable: true,
cornerStyle: 'circle',
cornerColor: '#f6ff00',
cornerStrokeColor: '#f6ff00',
transparentCorners: false,
borderColor: '#f9f60b',
cornerSize: 22,
hasRotatingPoint: true,
id: 'letter'
});
img.setControlsVisibility({
mt: false,
mr: false,
mb: false,
ml: false
});
canvas.add(img);
});
}
and here is the loop that calls it
for (var i = 0; i < letters; i++) {
buildImage(i);
}
I want to add these letters to the canvas as a group which can be un grouped if needed as well. Is there a way to do this?
Here is my JSfiddle

As fabric.Image.fromURL is asynchronous, so you have to wait till all the images loaded, after loading all images create a group of all images.
$(document).ready(function() {
canvasWidth = 448;
canvasHeight = 390;
canvas = new fabric.Canvas('c', {
width: canvasWidth,
height: canvasHeight,
containerClassName: 'c',
selection: true,
preserveObjectStacking: true,
});
var word = 'abc';
let letters = word.length;
let imageLoaded = 0;
var letterWidth = canvas.width / letters;
var numArr = [];
var wordArray = word.split("");
var offset = [
0,
letterWidth,
letterWidth * 2,
letterWidth * 3,
letterWidth * 4,
letterWidth * 5,
letterWidth * 6,
letterWidth * 7,
letterWidth * 8,
letterWidth * 9,
letterWidth * 10,
letterWidth * 11,
letterWidth * 12,
letterWidth * 13,
];
for (var i = 0; i < letters; i++) {
buildImage(i);
}
let imageData = [];
var scaleO = letterWidth / 448;
var wordPositionY = (canvasHeight - letterWidth) / 2
// creates a new scope for the passed in value of i when called:
function buildImage(i) {
var wordo = jQuery('*[data-id="' + wordArray[i] + '"]').attr('src');
fabric.Image.fromURL(wordo, function(img, letterWidth) {
// fabric.Image.fromURL(tiles[i], function (img) {
img.scale(scaleO).set({
left: offset[i],
top: wordPositionY,
id: 'letter'
});
img.setControlsVisibility({
mt: false,
mr: false,
mb: false,
ml: false
});
imageData.push(img);
if (letters == ++imageLoaded) {
setGroup();
}
});
}
function setGroup() {
let group = new fabric.Group(imageData, {
top: 100,
selectable: true,
cornerStyle: 'circle',
cornerColor: '#f6ff00',
cornerStrokeColor: '#f6ff00',
transparentCorners: false,
borderColor: '#f9f60b',
cornerSize: 22,
})
canvas.add(group)
imageData = [];
}
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 450px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
#c {
background: #e6e6e6;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message">
<p>My Canvas</p>
<canvas id="c"></canvas>
</div>
<div class="letters">
<img src="https://i.imgur.com/7lXiKkD.png" height="32" id="theme_img" data-id="a" alt="">
<img src="https://i.imgur.com/gMqYdMB.png" height="32" id="theme_img" data-id="b" alt="">
<img src="https://i.imgur.com/1CMBCqv.png" height="32" id="theme_img" data-id="c" alt="">
</div>

Canvas blocks area hover

I imitated for tag area hover through js. But when place canvas ON image, hover gets blocked. But when I place it under the image, canvas content isn't visible.
I create the js function for the every area and when initializing the page, I place canvas on the image.
var hdc;
// shorthand func
function byId(e){return document.getElementById(e);}
// takes a string that contains coords eg - "227,307,261,309, 339,354, 328,371, 240,331"
// draws a line from each co-ord pair to the next - assumes starting point needs to be repeated as ending point.
function drawPoly(coOrdStr)
{
var mCoords = coOrdStr.split(',');
var i, n;
n = mCoords.length;
hdc.beginPath();
hdc.moveTo(mCoords[0], mCoords[1]);
for (i=2; i<n; i+=2)
{
hdc.lineTo(mCoords[i], mCoords[i+1]);
}
hdc.lineTo(mCoords[0], mCoords[1]);
hdc.stroke();
}
function drawRect(coOrdStr)
{
var mCoords = coOrdStr.split(',');
var top, left, bot, right;
left = mCoords[0];
top = mCoords[1];
right = mCoords[2];
bot = mCoords[3];
hdc.fillRect(left,top,right-left,bot-top);
}
function myHover(element)
{
var hoveredElement = element;
var coordStr = element.getAttribute('coords');
var areaType = element.getAttribute('shape');
switch (areaType)
{
case 'polygon':
case 'poly':
drawPoly(coordStr);
break;
case 'rect':
drawRect(coordStr);
break;
}
}
function myLeave()
{
var canvas = byId('myCanvas');
hdc.clearRect(0, 0, canvas.width, canvas.height);
}
function myInit()
{
// get the target image
var img = byId('main');
var x,y, w,h;
// get it's position and width+height
x = img.offsetLeft;
y = img.offsetTop;
w = img.clientWidth;
h = img.clientHeight;
//alert(x + " " + y + " " + w + " " + h);
// move the canvas, so it's contained by the same parent as the image
var imgParent = img.parentNode;
var can = byId('myCanvas');
imgParent.appendChild(can);
// place the canvas in front of the image
can.style.zIndex = -1;
// position it over the image
can.style.left = x+'px';
can.style.top = y+'px';
// make same size as the image
can.setAttribute('width', w+'px');
can.setAttribute('height', h+'px');
// get it's context
hdc = can.getContext('2d');
// set the 'default' values for the colour/width of fill/stroke operations
hdc.fillStyle = 'red';
hdc.strokeStyle = 'red';
hdc.lineWidth = 4;
}
#back_1 {
background-color: #cecece;
height: 720px;
margin: 0px auto;
text-align: center;
}
#main {
width: 700px;
high: 700px;
line-height: 0;
border: none;
}
#bolshevism {
height: 300px;
background-color: #b30106;
}
.text_1 {
width: 1320px;
padding-top: 70px;
margin: 0px auto;
text-align: left;
}
.head {
font: bold 40px Ubuntu-B;
}
.line {
width: 500px;
padding-top: 10px;
padding-bottom: 10px;
}
.descriprion{
font: 20px Ubuntu-B;
}
.text_2 {
width: 1320px;
padding-top: 70px;
margin: 0px auto;
text-align: right;
}
.authoritarian {
color: #ffffff;
}
#myCanvas {
position: absolute;
}
<body onload="myInit()">
<canvas id='myCanvas'></canvas>
<div id="back_1">
<img src="http://i.imgur.com/XQ5KueE.png" id="main" usemap="#map"ismap>
<div>
<map name="map">
<area href="#bolshevism_1" onmouseover='myHover(this);' onmouseout='myLeave();' shape="rect" coords="59,55,105,128" alt="Bolshevism">
</map>
</div>
</div>
<div id="bolshevism" class="authoritarian">
<div class="text_1">
<a id="bolshevism_1"><p class="head">BOLSHEVISM</p></a>
<p class="descriprion">Bolshevism is the term used to describe the beliefs and practices of the Bolsheviks, the members of a political movement in Russia during the early 20th century. Bolsheviks were a faction of the Marxist Russian Social Democratic Labour Party (RSDLP) which split apart from the Menshevik faction at the Second Party Congress in 1903. The RSDLP was a revolutionary socialist political party formed in 1898 in Minsk in Belarus to unite the various revolutionary organisations of the Russian Empire into one party.</p>
</div>
</div>
</body>

Just add pointer-events:none;
var hdc;
// shorthand func
function byId(e){return document.getElementById(e);}
// takes a string that contains coords eg - "227,307,261,309, 339,354, 328,371, 240,331"
// draws a line from each co-ord pair to the next - assumes starting point needs to be repeated as ending point.
function drawPoly(coOrdStr)
{
var mCoords = coOrdStr.split(',');
var i, n;
n = mCoords.length;
hdc.beginPath();
hdc.moveTo(mCoords[0], mCoords[1]);
for (i=2; i<n; i+=2)
{
hdc.lineTo(mCoords[i], mCoords[i+1]);
}
hdc.lineTo(mCoords[0], mCoords[1]);
hdc.stroke();
}
function drawRect(coOrdStr)
{
var mCoords = coOrdStr.split(',');
var top, left, bot, right;
left = mCoords[0];
top = mCoords[1];
right = mCoords[2];
bot = mCoords[3];
hdc.fillRect(left,top,right-left,bot-top);
}
function myHover(element)
{
var hoveredElement = element;
var coordStr = element.getAttribute('coords');
var areaType = element.getAttribute('shape');
switch (areaType)
{
case 'polygon':
case 'poly':
drawPoly(coordStr);
break;
case 'rect':
drawRect(coordStr);
break;
}
}
function myLeave()
{
var canvas = byId('myCanvas');
hdc.clearRect(0, 0, canvas.width, canvas.height);
}
function myInit()
{
// get the target image
var img = byId('main');
var x,y, w,h;
// get it's position and width+height
x = img.offsetLeft;
y = img.offsetTop;
w = img.clientWidth;
h = img.clientHeight;
//alert(x + " " + y + " " + w + " " + h);
// move the canvas, so it's contained by the same parent as the image
var imgParent = img.parentNode;
var can = byId('myCanvas');
imgParent.appendChild(can);
// place the canvas in front of the image
can.style.zIndex = -1;
// position it over the image
can.style.left = x+'px';
can.style.top = y+'px';
// make same size as the image
can.setAttribute('width', w+'px');
can.setAttribute('height', h+'px');
// get it's context
hdc = can.getContext('2d');
// set the 'default' values for the colour/width of fill/stroke operations
hdc.fillStyle = 'red';
hdc.strokeStyle = 'red';
hdc.lineWidth = 4;
}
#back_1 {
background-color: #cecece;
height: 720px;
margin: 0px auto;
text-align: center;
}
#main {
width: 700px;
high: 700px;
line-height: 0;
border: none;
}
#bolshevism {
height: 300px;
background-color: #b30106;
}
.text_1 {
width: 1320px;
padding-top: 70px;
margin: 0px auto;
text-align: left;
}
.head {
font: bold 40px Ubuntu-B;
}
.line {
width: 500px;
padding-top: 10px;
padding-bottom: 10px;
}
.descriprion{
font: 20px Ubuntu-B;
}
.text_2 {
width: 1320px;
padding-top: 70px;
margin: 0px auto;
text-align: right;
}
.authoritarian {
color: #ffffff;
}
#myCanvas {
position:absolute;
pointer-events:none;
}
<body onload="myInit()">
<canvas id='myCanvas'></canvas>
<div id="back_1">
<img src="http://i.imgur.com/XQ5KueE.png" id="main" usemap="#map"ismap>
<div>
<map name="map">
<area href="#bolshevism_1" onmouseover='myHover(this);' onmouseout='myLeave();' shape="rect" coords="59,55,105,128" alt="Bolshevism">
</map>
</div>
</div>
<div id="bolshevism" class="authoritarian">
<div class="text_1">
<a id="bolshevism_1"><p class="head">BOLSHEVISM</p></a>
<p class="descriprion">Bolshevism is the term used to describe the beliefs and practices of the Bolsheviks, the members of a political movement in Russia during the early 20th century. Bolsheviks were a faction of the Marxist Russian Social Democratic Labour Party (RSDLP) which split apart from the Menshevik faction at the Second Party Congress in 1903. The RSDLP was a revolutionary socialist political party formed in 1898 in Minsk in Belarus to unite the various revolutionary organisations of the Russian Empire into one party.</p>
</div>
</div>
</body>

Randomize position of animated object

I have little script that moves objects on orbital and I want to randomize starting position of object.
Here's what I'm talking about:
http://jsfiddle.net/W69s6/1018/
HTML
<div class="orbit">
<div class="circle"></div>
</div>
CSS
.orbit
{
height: 200px;
width: 200px;
background: rgba(0,0,0,0.2);
}
.circle
{
height: 50px;
width: 50px;
background: #00ff00;
position: absolute;
}
JS
$(document).ready(function() {
orbit('.circle', 0, 0.01, 100, 75, 75);
});
function orbit(obj, t, ts, r, x, y)
{
t += ts;
var top = Math.floor(y - (r * Math.sin(t)));
var left = Math.floor(x - (r * Math.cos(t)));
$(obj).animate({
top: top,
left: left,
}, 1, function()
{
orbit(obj, t, ts, r, x, y);
});
}
Is anyone good at math and knows how to change it?

Change the first part of your code:
$(document).ready(function() {
orbit('.circle', Math.random()*100, 0.01, 100, 75, 75);
});