Develop Reference

Cursor wont align with HTML Canvas on longer and thinner images

I have a canvas that I am trying to draw on whenever I use square images with dimensions like such:
Width:2925
Height:2354
My cursor works correctly. When I use images with dimensions like Width: 585 Height: 2354 My cursor refuses to align correctly. Here is my JS I am using:
var canvas;
var ctx;
var canvasOffset;
var offsetX;
var offsetY;
var isDrawing = false;
var drag = false;
var rect = {};
var background = new Image();
//canvas.height = background.height;
//canvas.width = background.width;
var aspectRatio;
var parentOffsetWidth;
var parentOffsetHeight;
// Make sure the image is loaded first otherwise nothing will draw.
$(background).on("load", function () {
//ctx.drawImage(background,0,0);
//ctx.width = background.width;
//drawImageProp(ctx, background, 0, 0, background.width, background.height);.
//coverImg(background, 'cover');
//coverImg(background, 'contain');
//ctx.drawImage(background, 0, 0, background.width,background.height,0, 0, ctx.width, ctx.height);
console.log("--background img load--");
parentOffsetWidth = document.getElementById("imgGrid").offsetWidth;
parentOffsetHeight = document.getElementById("imgGrid").offsetHeight;
console.log("w:" + parentOffsetWidth);
console.log("h:" + parentOffsetHeight);
if (parentOffsetWidth < 500) {
//if img is to small to render properly
//parentOffsetWidth = 500;
}
if (background != null) {
canvas.height = (background.height / background.width) * parentOffsetWidth;
canvas.width = parentOffsetWidth;
}
//coverImg(background, 'cover');
drawImageProp(ctx, background, 0, 0, canvas.width, canvas.height, offsetX, offsetY);
})
$(document).ready(function () {
//ctx.drawImage(background,0,0);
})
function Load(backgroundImgSrc) {
console.log("--load--");
console.log(backgroundImgSrc);
background.src = backgroundImgSrc;
aspectRatio = background.height / background.width;
canvas = document.getElementById("canvas");
canvasOffset = $("#canvas").offset();
offsetX = canvasOffset.left;
offsetY = canvasOffset.top;
ctx = canvas.getContext("2d");
init();
}
var startX;
var startY;
const coverImg = (img, type) => {
const imgRatio = img.height / img.width
const winRatio = window.innerHeight / window.innerWidth
if ((imgRatio < winRatio && type === 'contain') || (imgRatio > winRatio && type === 'cover')) {
const h = window.innerWidth * imgRatio
ctx.drawImage(img, 0, (window.innerHeight - h) / 2, window.innerWidth, h)
}
if ((imgRatio > winRatio && type === 'contain') || (imgRatio < winRatio && type === 'cover')) {
const w = window.innerWidth * winRatio / imgRatio
ctx.drawImage(img, (window.w - w) / 2, 0, w, window.innerHeight)
}
}
function drawImageProp(ctx, img, x, y, w, h, offsetX, offsetY) {
if (arguments.length === 2) {
x = y = 0;
w = ctx.canvas.width;
h = ctx.canvas.height;
}
// default offset is center
offsetX = typeof offsetX === "number" ? offsetX : 0.5;
offsetY = typeof offsetY === "number" ? offsetY : 0.5;
// keep bounds [0.0, 1.0]
if (offsetX < 0) offsetX = 0;
if (offsetY < 0) offsetY = 0;
if (offsetX > 1) offsetX = 1;
if (offsetY > 1) offsetY = 1;
var iw = img.width,
ih = img.height,
r = Math.min(w / iw, h / ih),
nw = iw * r, // new prop. width
nh = ih * r, // new prop. height
cx, cy, cw, ch, ar = 1;
// decide which gap to fill
if (nw < w) ar = w / nw;
if (Math.abs(ar - 1) < 1e-14 && nh < h) ar = h / nh; // updated
nw *= ar;
nh *= ar;
// calc source rectangle
cw = iw / (nw / w);
ch = ih / (nh / h);
cx = (iw - cw) * offsetX;
cy = (ih - ch) * offsetY;
// make sure source rectangle is valid
if (cx < 0) cx = 0;
if (cy < 0) cy = 0;
if (cw > iw) cw = iw;
if (ch > ih) ch = ih;
// fill image in dest. rectangle
ctx.drawImage(img, cx, cy, cw, ch, x, y, w, h);
}
////////////////////////////////////
function init() {
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('mousemove', mouseMove, false);
}
function mouseDown(e) {
console.log(e);
rect.Left = e.pageX - offsetX;
rect.Top = e.pageY - offsetY;
rect.Left_Percentage = (rect.Left / canvas.width) * 100;
rect.Top_Percentage = (rect.Top / canvas.height) * 100;
drag = true;
}
function mouseUp() {
drag = false;
//ctx.clearRect(0,0,canvas.width,canvas.height);
canvas.style.cursor = "default";
window.dotnetInstance.invokeMethodAsync("ShowPopup", rect);
}
function mouseMove(e) {
if (drag) {
rect.Width = (e.pageX - offsetX) - rect.Left;
rect.Height = (e.pageY - offsetY) - rect.Top;
rect.Height_Percentage = (rect.Height/canvas.height) * 100;
rect.Width_Percentage = (rect.Width / canvas.width) * 100;
ctx.clearRect(0, 0, canvas.width, canvas.height);
draw();
}
}
function draw() {
ctx.setLineDash([10]);
ctx.strokeRect(rect.Left, rect.Top, rect.Width, rect.Height);
}
window.SetDotNetInstance = (dotnetHelper) => {
console.log(dotnetHelper);
if (window.dotnetInstance == null) {
window.dotnetInstance = dotnetHelper;
}
}
function toggleDisplay(current) {
if ($(current).is(":checked")){
$(".clickRegionBlock").hide();
$(".blockNumberInfo").hide();
$("#imgGrid>.border").removeClass("border")
}
else {
$(".clickRegionBlock").show();
$(".blockNumberInfo").show();
$("#imgGrid>.box-border").addClass("border");
}
}
function Zoom() {
var gridSizes = $("#imgGrid").css("grid-template-columns");
var splitArrPx = gridSizes.split(" ");
var firstpx = parseInt(splitArrPx[0].replace("px", ""));
firstpx += 100;
var zoomedGridSizes = "";
splitArrPx.forEach(function (item, index, arr) {
var replacedItem = item.replace(/\d+/, firstpx);
zoomedGridSizes += replacedItem + " ";
})
console.log(zoomedGridSizes);
$("#imgGrid").css("grid-template-columns", zoomedGridSizes);
Load(background.src);
}
And here is my HTML code I am using .Net Blazor as well to achieve this that is why there are variables in my HTML it should not effect my javascript:
<canvas id="canvas" style="background-image:url('api/contentpreview/blocks/#b.PageId/#b.LocalIndex/#Resolution/#zone'); width:100%; height:auto; background-size:cover;" #onload='() => LoadImg("api/contentpreview/blocks/" + b.PageId + "/" + b.LocalIndex + "/" + Resolution + "/" + zone)' />
initCanvas = true;
canvasImg = "api/contentpreview/blocks/" + b.PageId + "/" + b.LocalIndex + "/" + Resolution + "/" + zone;

HTML h1 tag not displaying correctly above javascript+css animation

I have the following code (from a code pen fork), and wish to add a simple Html H1 tag above the animation on the page. I have tried the below, but for some reason the H1 tag just displays for a second (flashes) and then disappears off the screen.
I have tried placing it in several places and also used tags, but the same thing happens.
Can someone please suggest a fix and also explain why this is occuring?
html, javascript file: and CSS File (style.css)
class Canvas {
constructor(element, ctx, w, h) {
this.element = element
this.ctx = ctx
this.width = w
this.height = h
this.interactive = false
this.playing = true
this.point = {
value: 150,
speed: 0.25,
limit: 70,
floor: 10,
up: true,
animating: false
}
this.multiplier = {
value: 1,
speed: 0.005,
limit: 20,
floor: 1,
up: true,
animating: true
}
this.center = {
x: w / 2,
y: h / 2,
targetX: w / 2,
targetY: h / 2,
easing: 0.02
}
this.radius = {
val: h / 2.2,
targetVal: h / 2.2,
easing: 0.02
}
document.body.addEventListener('click', this.click.bind(this))
document.body.addEventListener('mousemove', this.move.bind(this))
document.body.addEventListener('keyup', this.keyup.bind(this))
this.hue = 160
}
click(e) {
this.interactive = !this.interactive
if (!this.interactive) {
this.center.targetX = this.width / 2
this.center.targetY = this.height / 2
this.radius.targetVal = this.height / 2.2
this.element.classList.remove('interactive')
} else {
this.element.classList.add('interactive')
}
}
move(e) {
if (!this.interactive) {
return
}
const h3 = this.height / 3
this.center.targetX = e.pageX
this.center.targetY = Math.max(e.pageY, h3)
this.radius.targetVal = h3 + (e.pageY * 0.8)
}
keyup(e) {
if (e.which != 32) {
return
}
this.playing = !this.playing
if (this.playing && this.drawLoop) {
this.drawLoop()
}
}
update() {
this.clear()
this.animate(this.point)
this.animate(this.multiplier)
this.ease(this.center)
this.ease(this.radius)
this.hue += 0.3
const h = (this.hue % 360)
this.ctx.fillStyle = 'hsl(' + h + ',70%,20%)'
this.ctx.strokeStyle = 'hsla(' + h + ',80%,60%,0.2)'
this.ctx.globalCompositeOperation = 'lighter'
}
clear() {
this.ctx.globalCompositeOperation = 'source-over'
this.ctx.fillStyle = 'rgba(0,0,0,0.1)'
this.ctx.rect(0, 0, this.width, this.height)
this.ctx.fill()
}
draw() {
let radius = this.radius.val
const w2 = this.center.x,
h2 = this.center.y
this.ctx.beginPath()
this.ctx.shadowBlur = 0
this.ctx.shadowColor = 'black'
const points = this.point.value
const multiplier = this.multiplier.value
for (let p = 0; p < points; p++) {
const t = (p / points) * Math.PI * 2
const t2 = ((p * multiplier) / points) * Math.PI * 2
const x = radius * Math.cos(t) + w2
const y = radius * Math.sin(t) + h2
const x2 = radius * Math.cos(t2) + w2
const y2 = radius * Math.sin(t2) + h2
this.ctx.moveTo(x, y)
this.ctx.lineTo(x2, y2)
}
this.ctx.arc(w2, h2, radius, 0, 2 * Math.PI)
this.ctx.stroke()
this.ctx.closePath()
}
animate(object) {
if (!object.animating) {
return
}
if (object.up) {
object.value += object.speed
} else {
object.value -= object.speed
}
if (object.value > object.limit) {
object.up = false
} else if (object.value < object.floor) {
object.up = true
}
}
ease(object) {
if (object.val) {
const dv = object.targetVal - object.val
object.val += dv * object.easing
return
}
const dx = object.targetX - object.x
const dy = object.targetY - object.y
object.x += dx * object.easing
object.y += dy * object.easing
}
random(from, to) {
return from + (Math.rand() * (to - from))
}
resize(w, h) {
this.width = w
this.height = h
this.center.targetX = w / 2
this.center.targetY = h / 2
this.radius.targetVal = h / 2.2
}
}
(_ => {
const canvasElement = document.getElementById('canvas'),
ctx = canvasElement.getContext('2d')
let w = canvasElement.width = window.innerWidth,
h = canvasElement.height = window.innerHeight,
density = 1
const canvas = new Canvas(canvasElement, ctx, w, h)
function setup() {
window.addEventListener('resize', resize)
density = window.devicePixelRatio != undefined ? window.devicePixelRatio : 1.0
canvasElement.width = w * density
canvasElement.height = h * density
canvas.width = w
canvas.height = h
canvas.drawLoop = draw
ctx.scale(density, density)
draw()
}
function draw() {
canvas.update()
canvas.draw()
if (canvas.playing) {
window.requestAnimationFrame(draw)
}
}
function resize() {
w = canvasElement.width = window.innerWidth
h = canvasElement.height = window.innerHeight
canvasElement.width = w * density
canvasElement.height = h * density
canvas.resize(w, h)
ctx.scale(density, density)
}
setup()
})()
body {
background: #000;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
canvas.interactive {
cursor: none;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
<center>
<h1>
<font color="white">This is the H1 Tag</font>
</h1>
</center>
</head>
<body>
<br>
<br>
<br>
<br>
<canvas id="canvas"></canvas>
Update
Thanks to the answer below, I have changed the css to the following, and the tag does display, but the animation is not centered. How can the canvas be re-positioned so that other 'elements' or objects can be fit around it?
canvas {
width: 30%;
height: 30%;
position: absolute;
left: 0;
top: 0;
}

This is because your canvas style is set to take up the whole page. Your h1 is also inside the head of the document. So that needs moved into the body too.
canvas {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
If you remove the canvas style, your h1 will sit above the canvas.
Edit:
Reading between the lines OP wants the image scaled down and centered. I've created a Fiddle to show how this can be achieved.
Fiddle

Add some z-index to your h1 and remove the obsolete tags:
class Canvas {
constructor(element, ctx, w, h) {
this.element = element
this.ctx = ctx
this.width = w
this.height = h
this.interactive = false
this.playing = true
this.point = {
value: 150,
speed: 0.25,
limit: 70,
floor: 10,
up: true,
animating: false
}
this.multiplier = {
value: 1,
speed: 0.005,
limit: 20,
floor: 1,
up: true,
animating: true
}
this.center = {
x: w / 2,
y: h / 2,
targetX: w / 2,
targetY: h / 2,
easing: 0.02
}
this.radius = {
val: h / 2.2,
targetVal: h / 2.2,
easing: 0.02
}
document.body.addEventListener('click', this.click.bind(this))
document.body.addEventListener('mousemove', this.move.bind(this))
document.body.addEventListener('keyup', this.keyup.bind(this))
this.hue = 160
}
click(e) {
this.interactive = !this.interactive
if (!this.interactive) {
this.center.targetX = this.width / 2
this.center.targetY = this.height / 2
this.radius.targetVal = this.height / 2.2
this.element.classList.remove('interactive')
} else {
this.element.classList.add('interactive')
}
}
move(e) {
if (!this.interactive) {
return
}
const h3 = this.height / 3
this.center.targetX = e.pageX
this.center.targetY = Math.max(e.pageY, h3)
this.radius.targetVal = h3 + (e.pageY * 0.8)
}
keyup(e) {
if (e.which != 32) {
return
}
this.playing = !this.playing
if (this.playing && this.drawLoop) {
this.drawLoop()
}
}
update() {
this.clear()
this.animate(this.point)
this.animate(this.multiplier)
this.ease(this.center)
this.ease(this.radius)
this.hue += 0.3
const h = (this.hue % 360)
this.ctx.fillStyle = 'hsl(' + h + ',70%,20%)'
this.ctx.strokeStyle = 'hsla(' + h + ',80%,60%,0.2)'
this.ctx.globalCompositeOperation = 'lighter'
}
clear() {
this.ctx.globalCompositeOperation = 'source-over'
this.ctx.fillStyle = 'rgba(0,0,0,0.1)'
this.ctx.rect(0, 0, this.width, this.height)
this.ctx.fill()
}
draw() {
let radius = this.radius.val
const w2 = this.center.x,
h2 = this.center.y
this.ctx.beginPath()
this.ctx.shadowBlur = 0
this.ctx.shadowColor = 'black'
const points = this.point.value
const multiplier = this.multiplier.value
for (let p = 0; p < points; p++) {
const t = (p / points) * Math.PI * 2
const t2 = ((p * multiplier) / points) * Math.PI * 2
const x = radius * Math.cos(t) + w2
const y = radius * Math.sin(t) + h2
const x2 = radius * Math.cos(t2) + w2
const y2 = radius * Math.sin(t2) + h2
this.ctx.moveTo(x, y)
this.ctx.lineTo(x2, y2)
}
this.ctx.arc(w2, h2, radius, 0, 2 * Math.PI)
this.ctx.stroke()
this.ctx.closePath()
}
animate(object) {
if (!object.animating) {
return
}
if (object.up) {
object.value += object.speed
} else {
object.value -= object.speed
}
if (object.value > object.limit) {
object.up = false
} else if (object.value < object.floor) {
object.up = true
}
}
ease(object) {
if (object.val) {
const dv = object.targetVal - object.val
object.val += dv * object.easing
return
}
const dx = object.targetX - object.x
const dy = object.targetY - object.y
object.x += dx * object.easing
object.y += dy * object.easing
}
random(from, to) {
return from + (Math.rand() * (to - from))
}
resize(w, h) {
this.width = w
this.height = h
this.center.targetX = w / 2
this.center.targetY = h / 2
this.radius.targetVal = h / 2.2
}
}
(_ => {
const canvasElement = document.getElementById('canvas'),
ctx = canvasElement.getContext('2d')
let w = canvasElement.width = window.innerWidth,
h = canvasElement.height = window.innerHeight,
density = 1
const canvas = new Canvas(canvasElement, ctx, w, h)
function setup() {
window.addEventListener('resize', resize)
density = window.devicePixelRatio != undefined ? window.devicePixelRatio : 1.0
canvasElement.width = w * density
canvasElement.height = h * density
canvas.width = w
canvas.height = h
canvas.drawLoop = draw
ctx.scale(density, density)
draw()
}
function draw() {
canvas.update()
canvas.draw()
if (canvas.playing) {
window.requestAnimationFrame(draw)
}
}
function resize() {
w = canvasElement.width = window.innerWidth
h = canvasElement.height = window.innerHeight
canvasElement.width = w * density
canvasElement.height = h * density
canvas.resize(w, h)
ctx.scale(density, density)
}
setup()
})()
body {
background: #000;
overflow: hidden;
}
h1 {
position:relative;
z-index:2;
color:#fff;
text-align:center;
}
canvas {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
canvas.interactive {
cursor: none;
}
<canvas id="canvas"></canvas>
<h1>This is a title</h1>

This is because of your canvas styles. If you add a margin-top to your canvas the h1 will not be removed, try it like this:
canvas {
margin-top: 200px;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
You'll see that now your h1 is not dissapearing anymore.
Edit
Reading between the lines OP appears to want it scaled down and centered, so I've created a fiddle with updated code.
Fiddle

JavaScript Resize, Drag, Snap with custom window/div size

I'm trying to figure out a way to resize/drag/snap a div element within a custom window/div size, not just the entire window. I had found this code here https://codepen.io/zz85/pen/gbOoVP which is exactly the functionality I'm looking for but I cannot figure out a way to adapt it to a custom bounding size. Currently it just takes the main windows bounds. Any help would be much appreciated. Thank you!
Here is the main Javascript code that I had found:
"use strict";
// Minimum resizable area
var minWidth = 60;
var minHeight = 40;
// Thresholds
var FULLSCREEN_MARGINS = -10;
var MARGINS = 4;
// End of what's configurable.
var clicked = null;
var onRightEdge, onBottomEdge, onLeftEdge, onTopEdge;
var rightScreenEdge, bottomScreenEdge;
var preSnapped;
var b, x, y;
var redraw = false;
var pane = document.getElementById('pane');
var ghostpane = document.getElementById('ghostpane');
function setBounds(element, x, y, w, h) {
element.style.left = x + 'px';
element.style.top = y + 'px';
element.style.width = w + 'px';
element.style.height = h + 'px';
}
function hintHide() {
setBounds(ghostpane, b.left, b.top, b.width, b.height);
ghostpane.style.opacity = 0;
// var b = ghostpane.getBoundingClientRect();
// ghostpane.style.top = b.top + b.height / 2;
// ghostpane.style.left = b.left + b.width / 2;
// ghostpane.style.width = 0;
// ghostpane.style.height = 0;
}
// Mouse events
pane.addEventListener('mousedown', onMouseDown);
document.addEventListener('mousemove', onMove);
document.addEventListener('mouseup', onUp);
// Touch events
pane.addEventListener('touchstart', onTouchDown);
document.addEventListener('touchmove', onTouchMove);
document.addEventListener('touchend', onTouchEnd);
function onTouchDown(e) {
onDown(e.touches[0]);
e.preventDefault();
}
function onTouchMove(e) {
onMove(e.touches[0]);
}
function onTouchEnd(e) {
if (e.touches.length ==0) onUp(e.changedTouches[0]);
}
function onMouseDown(e) {
onDown(e);
e.preventDefault();
}
function onDown(e) {
calc(e);
var isResizing = onRightEdge || onBottomEdge || onTopEdge || onLeftEdge;
clicked = {
x: x,
y: y,
cx: e.clientX,
cy: e.clientY,
w: b.width,
h: b.height,
isResizing: isResizing,
isMoving: !isResizing && canMove(),
onTopEdge: onTopEdge,
onLeftEdge: onLeftEdge,
onRightEdge: onRightEdge,
onBottomEdge: onBottomEdge
};
}
function canMove() {
return x > 0 && x < b.width && y > 0 && y < b.height
&& y < 30;
}
function calc(e) {
b = pane.getBoundingClientRect();
x = e.clientX - b.left;
y = e.clientY - b.top;
onTopEdge = y < MARGINS;
onLeftEdge = x < MARGINS;
onRightEdge = x >= b.width - MARGINS;
onBottomEdge = y >= b.height - MARGINS;
rightScreenEdge = window.innerWidth - MARGINS;
bottomScreenEdge = window.innerHeight - MARGINS;
}
var e;
function onMove(ee) {
calc(ee);
e = ee;
redraw = true;
}
function animate() {
requestAnimationFrame(animate);
if (!redraw) return;
redraw = false;
if (clicked && clicked.isResizing) {
if (clicked.onRightEdge) pane.style.width = Math.max(x, minWidth) + 'px';
if (clicked.onBottomEdge) pane.style.height = Math.max(y, minHeight) + 'px';
if (clicked.onLeftEdge) {
var currentWidth = Math.max(clicked.cx - e.clientX + clicked.w, minWidth);
if (currentWidth > minWidth) {
pane.style.width = currentWidth + 'px';
pane.style.left = e.clientX + 'px';
}
}
if (clicked.onTopEdge) {
var currentHeight = Math.max(clicked.cy - e.clientY + clicked.h, minHeight);
if (currentHeight > minHeight) {
pane.style.height = currentHeight + 'px';
pane.style.top = e.clientY + 'px';
}
}
hintHide();
return;
}
if (clicked && clicked.isMoving) {
if (b.top < FULLSCREEN_MARGINS || b.left < FULLSCREEN_MARGINS || b.right > window.innerWidth - FULLSCREEN_MARGINS || b.bottom > window.innerHeight - FULLSCREEN_MARGINS) {
// hintFull();
setBounds(ghostpane, 0, 0, window.innerWidth, window.innerHeight);
ghostpane.style.opacity = 0.2;
} else if (b.top < MARGINS) {
// hintTop();
setBounds(ghostpane, 0, 0, window.innerWidth, window.innerHeight / 2);
ghostpane.style.opacity = 0.2;
} else if (b.left < MARGINS) {
// hintLeft();
setBounds(ghostpane, 0, 0, window.innerWidth / 2, window.innerHeight);
ghostpane.style.opacity = 0.2;
} else if (b.right > rightScreenEdge) {
// hintRight();
setBounds(ghostpane, window.innerWidth / 2, 0, window.innerWidth / 2, window.innerHeight);
ghostpane.style.opacity = 0.2;
} else if (b.bottom > bottomScreenEdge) {
// hintBottom();
setBounds(ghostpane, 0, window.innerHeight / 2, window.innerWidth, window.innerWidth / 2);
ghostpane.style.opacity = 0.2;
} else {
hintHide();
}
if (preSnapped) {
setBounds(pane,
e.clientX - preSnapped.width / 2,
e.clientY - Math.min(clicked.y, preSnapped.height),
preSnapped.width,
preSnapped.height
);
return;
}
// moving
pane.style.top = (e.clientY - clicked.y) + 'px';
pane.style.left = (e.clientX - clicked.x) + 'px';
return;
}
// This code executes when mouse moves without clicking
// style cursor
if (onRightEdge && onBottomEdge || onLeftEdge && onTopEdge) {
pane.style.cursor = 'nwse-resize';
} else if (onRightEdge && onTopEdge || onBottomEdge && onLeftEdge) {
pane.style.cursor = 'nesw-resize';
} else if (onRightEdge || onLeftEdge) {
pane.style.cursor = 'ew-resize';
} else if (onBottomEdge || onTopEdge) {
pane.style.cursor = 'ns-resize';
} else if (canMove()) {
pane.style.cursor = 'move';
} else {
pane.style.cursor = 'default';
}
}
animate();
function onUp(e) {
calc(e);
if (clicked && clicked.isMoving) {
// Snap
var snapped = {
width: b.width,
height: b.height
};
if (b.top < FULLSCREEN_MARGINS || b.left < FULLSCREEN_MARGINS || b.right > window.innerWidth - FULLSCREEN_MARGINS || b.bottom > window.innerHeight - FULLSCREEN_MARGINS) {
// hintFull();
setBounds(pane, 0, 0, window.innerWidth, window.innerHeight);
preSnapped = snapped;
} else if (b.top < MARGINS) {
// hintTop();
setBounds(pane, 0, 0, window.innerWidth, window.innerHeight / 2);
preSnapped = snapped;
} else if (b.left < MARGINS) {
// hintLeft();
setBounds(pane, 0, 0, window.innerWidth / 2, window.innerHeight);
preSnapped = snapped;
} else if (b.right > rightScreenEdge) {
// hintRight();
setBounds(pane, window.innerWidth / 2, 0, window.innerWidth / 2, window.innerHeight);
preSnapped = snapped;
} else if (b.bottom > bottomScreenEdge) {
// hintBottom();
setBounds(pane, 0, window.innerHeight / 2, window.innerWidth, window.innerWidth / 2);
preSnapped = snapped;
} else {
preSnapped = null;
}
hintHide();
}
clicked = null;
}

Looking to add a background with Canvas element

This is the starting code for a JS canvas game.
I'm looking to add in a img background. where is the best place to start?
var results = [
{name: "Satisfied", count: 1043, url: "lightblue"},
{name: "Neutral", count: 563, color: "lightgreen"},
{name: "Unsatisfied", count: 510, color: "pink"},
{name: "No comment", count: 175, color: "silver"}
];
function flipHorizontally(context, around) {
context.translate(around, 0);
context.scale(-1, 1);
context.translate(-around, 0);
}
function CanvasDisplay(parent, level) {
this.canvas = document.createElement("canvas");
this.canvas.width = Math.min(600, level.width * scale);
this.canvas.height = Math.min(450, level.height * scale);
parent.appendChild(this.canvas);
this.cx = this.canvas.getContext("2d");
this.level = level;
this.animationTime = 0;
this.flipPlayer = false;
this.viewport = {
left: 0,
top: 0,
width: this.canvas.width / scale,
height: this.canvas.height / scale
};
this.drawFrame(0);
}
CanvasDisplay.prototype.clear = function() {
this.canvas.parentNode.removeChild(this.canvas);
};
CanvasDisplay.prototype.drawFrame = function(step) {
this.animationTime += step;
this.updateViewport();
this.clearDisplay();
this.drawBackground();
this.drawActors();
};
CanvasDisplay.prototype.updateViewport = function() {
var view = this.viewport, margin = view.width / 3;
var player = this.level.player;
var center = player.pos.plus(player.size.times(0.5));
if (center.x < view.left + margin)
view.left = Math.max(center.x - margin, 0);
else if (center.x > view.left + view.width - margin)
view.left = Math.min(center.x + margin - view.width,
this.level.width - view.width);
if (center.y < view.top + margin)
view.top = Math.max(center.y - margin, 0);
else if (center.y > view.top + view.height - margin)
view.top = Math.min(center.y + margin - view.height,
this.level.height - view.height);
};
CanvasDisplay.prototype.clearDisplay = function() {
if (this.level.status == "won")
this.cx.fillStyle = "rgb(68, 191, 255)";
else if (this.level.status == "lost")
this.cx.fillStyle = "rgb(44, 136, 214)";
else
this.cx.fillStyle = "rgb(68, 191, 255)";
this.cx.fillRect(0, 0,
this.canvas.width, this.canvas.height);
};
var otherSprites = document.createElement("img");
otherSprites.src = "img/sprites 2.png";
CanvasDisplay.prototype.drawBackground = function() {
var view = this.viewport;
var xStart = Math.floor(view.left);
var xEnd = Math.ceil(view.left + view.width);
var yStart = Math.floor(view.top);
var yEnd = Math.ceil(view.top + view.height);
for (var y = yStart; y < yEnd; y++) {
for (var x = xStart; x < xEnd; x++) {
var tile = this.level.grid[y][x];
if (tile == null) continue;
var screenX = (x - view.left) * scale;
var screenY = (y - view.top) * scale;
var tileX = tile == "lava" ? scale : 0;
this.cx.drawImage(otherSprites,
tileX, 0, scale, scale,
screenX, screenY, scale, scale);
}
}
};
var playerSprites = document.createElement("img");
playerSprites.src = "img/player 2.png";
var playerXOverlap = 4;
CanvasDisplay.prototype.drawPlayer = function(x, y, width,
height) {
var sprite = 8, player = this.level.player;
width += playerXOverlap * 2;
x -= playerXOverlap;
if (player.speed.x != 0)
this.flipPlayer = player.speed.x < 0;
if (player.speed.y != 0)
sprite = 9;
else if (player.speed.x != 0)
sprite = Math.floor(this.animationTime * 12) % 8;
this.cx.save();
if (this.flipPlayer)
flipHorizontally(this.cx, x + width / 2);
this.cx.drawImage(playerSprites,
sprite * width, 0, width, height,
x, y, width, height);
this.cx.restore();
};
CanvasDisplay.prototype.drawActors = function() {
this.level.actors.forEach(function(actor) {
var width = actor.size.x * scale;
var height = actor.size.y * scale;
var x = (actor.pos.x - this.viewport.left) * scale;
var y = (actor.pos.y - this.viewport.top) * scale;
if (actor.type == "player") {
this.drawPlayer(x, y, width, height);
} else {
var tileX = (actor.type == "coin" ? 2 : 1) * scale;
this.cx.drawImage(otherSprites,
tileX, 0, width, height,
x, y, width, height);
}
}, this);
};
I was thinking the canvasDisplay.clearDisplay function would be the best bet.
CanvasDisplay.prototype.clearDisplay = function() {
if (this.level.status == "won")
this.cx.fillStyle = "rgb(68, 191, 255)";
else if (this.level.status == "lost")
this.cx.fillStyle = "rgb(44, 136, 214)";
else
this.cx.fillStyle = "rgb(68, 191, 255)";
this.cx.fillRect(0, 0,
this.canvas.width, this.canvas.height);
};
Thanks in advance for any help you can provide.

It depends if you're looking for a dynamic or a static background, in which case I will recommend you to use CSS for the canvas background and play with the CSS positions to make it move.

How can I get this GIF from another website?

I'm creating a website and I want a certain gif background that runs automatically on page load, here is the link of the website
http://contact-festival.com/
And I want to use the moving star-background on the artist line up list
I checked my developer tools and the network , but can't seem to find a source

These are not gifs . These are made with canvas tags and javascript coding.
So here is an example below that you can use.
window.onload = function () {
var element = "starfield";
var bgColor = "#030304";
var FPS = 30;
var displacementRate = 5;
var accelerationRate = 10;
var maxSpeed = 100;
var maxStars = 1000;
var speedUp = setInterval(function(){
if (accelerationRate > maxSpeed) {
clearInterval(speedUp);
}
accelerationRate = accelerationRate * 1.1;
},100);
var Star = function() {
this.x = 0;
this.y = 0;
this.z = 0;
this.maxDepth = 0;
this.alpha = 0;
this.radius = 0;
this.dx = 0;
this.dy = 0;
this.dz = 0;
this.ddx = 0;
this.ddy = 0;
this.drawInContext = function(ctx, deltaX, deltaY) {
ctx.beginPath();
ctx.fillStyle = "rgba(255, 255, 255," + this.alpha + ")";
ctx.arc(this.x + deltaX, this.y + deltaY, this.radius, 0, Math.PI * 2, false);
ctx.fill();
};
};
var requestAnimationFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame ||
function(callback) {
return window.setTimeout(callback, 1000 / FPS);
};
function isCanvasSupported(element) {
return !!(element.getContext && element.getContext("2d"));
}
function backingScale(context) {
if ('devicePixelRatio' in window) {
if (window.devicePixelRatio > 1) {
return window.devicePixelRatio;
}
}
return 1;
}
function StarField(canvasID) {
this.canvas = document.getElementById(canvasID);
if (!isCanvasSupported(this.canvas)) {
this.canvas.className = "inactive";
this.canvas.width = window.innerWidth;
this.isCanvasEnabled = false;
return this;
}
this.isCanvasEnabled = true;
this.ctx = this.canvas.getContext("2d");
this.scaleFactor = backingScale(this.ctx);
this.stars = new Array();
function newStar() {
var star = new Star();
star.x = Math.random() * this.canvas.width - this.originX;
star.y = Math.random() * this.canvas.height - this.originY;
star.z = star.max_depth = Math.max(this.canvas.width, this.canvas.height);
star.alpha = Math.random();
star.radius = Math.random();
var xcoeff = star.x > 0 ? 1 : -1;
var ycoeff = star.y > 0 ? 1 : -1;
if (Math.abs(star.x) > Math.abs(star.y)) {
star.dx = 1.0;
star.dy = Math.abs(star.y / star.x);
} else {
star.dx = Math.abs(star.x / star.y);
star.dy = 1.0;
}
star.dx *= xcoeff * (displacementRate / 10);
star.dy *= ycoeff * (displacementRate / 10);
star.dz = -1;
star.ddx = (accelerationRate * star.dx) / 10;
star.ddy = (accelerationRate * star.dy) / 10;
return star;
}
function move(star) {
star.x += star.dx;
star.y += star.dy;
star.z += star.dz;
star.dx += star.ddx;
star.dy += star.ddy;
}
function updateStars(ctx, stars) {
for (var i=0; i<stars.length; i++) {
move(stars[i]);
if (stars[i].x < -this.originX || stars[i].x > this.originX || stars[i].y < -this.originY || stars[i].y > this.originY) {
// Remove
stars[i] = newStar();
} else {
// Paint
var deltaX = this.originX;
var deltaY = this.originY;
stars[i].drawInContext(ctx, deltaX, deltaY);
}
}
}
this.configureGeometry = function() {
// Ensure we are always at full width
this.canvas.width = window.innerWidth;
this.canvas.style.backgroundColor = bgColor;
var ratio = 1;
// Retina support
// See http://www.html5rocks.com/en/tutorials/canvas/hidpi/
if (this.scaleFactor > 1) {
var devicePixelRatio = this.scaleFactor;
var context = this.ctx;
var backingStoreRatio = context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
ratio = devicePixelRatio / backingStoreRatio;
// Upscale the canvas if the two ratios don't match
if (devicePixelRatio !== backingStoreRatio) {
var canvas = this.canvas;
var oldWidth = canvas.width;
var oldHeight = canvas.height;
canvas.width = oldWidth * ratio;
canvas.height = oldHeight * ratio;
canvas.style.width = oldWidth + 'px';
canvas.style.height = oldHeight + 'px';
// Now scale the context to counter the fact that we've manually scaled our canvas element
context.scale(ratio, ratio);
}
}
// Starting origin of stars
var logicalWidth = this.canvas.width / ratio;
var logicalHeight = this.canvas.height / ratio;
this.originX = logicalWidth / 2;
this.originY = logicalHeight / 2;
var numStars = logicalWidth / 2;
this.numStars = numStars > maxStars ? maxStars : numStars;
}
this.render = function() {
setTimeout(function() {
// Drawing
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
updateStars(this.ctx, this.stars);
requestAnimationFrame(render);
}, 1000 / FPS);
};
// Configure origin and frames before creating initial batch of stars
this.configureGeometry();
for (var i=0; i<this.numStars; i++) {
this.stars.push(newStar());
}
return this;
}
var starfield = StarField(element);
if (starfield.isCanvasEnabled) {
starfield.render();
}
// Make sure we adjust the canvas whenever the window resizes
// Don't rely on CSS rules for 100% width because that causes rendering issues
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
if (starfield.isCanvasEnabled) {
starfield.configureGeometry();
} else {
starfield.canvas.width = window.innerWidth;
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="starfield" width="100%" height="400px"></canvas>