canvas container page offset
// get the canvas and store its original dimensions
var canvas = document.querySelector('.canvas');
var originalWidth = canvas.width; // px
var originalHeight = canvas.height; // px
// draw something on the canvas
var context = canvas.getContext('2d');
var blockSize = originalWidth / 5; // px
context.fillStyle = '#6495ED'; // nice cornflowerblue
for (var i = 0; i < originalWidth; i += blockSize) {
for (var j = 0; j < originalHeight; j += blockSize) {
context.fillRect(i, j, blockSize / 2, blockSize / 2);
}
}
// get the bounds of the canvas element
function getBounds() {
return canvas.getBoundingClientRect();
}
// get the offset of the canvas relative to the document
function getOffset() {
var bounds = getBounds();
return {
x: bounds.left + window.scrollX,
y: bounds.top + window.scrollY,
};
}
// init the buttons for demonstration purposes
var resizeButton = document.querySelector('.resize');
var isResized = false;
resizeButton.addEventListener('click', function() {
var newWidth = 50; // px
var newHeight = 50; // px
if (!isResized) {
canvas.setAttribute('style', 'width: ' + newWidth + 'px; height: ' + newHeight + 'px');
} else {
canvas.removeAttribute('style');
}
updateDataList();
isResized = !isResized;
});
var toggleButton = document.querySelector('.toggle');
var container = document.querySelector('.container');
var alignment = 'center'; // centered by default
// align the container element between left, center, and right
function alignContainer() {
var label = '';
switch (alignment) {
// align to center
case 'center':
container.setAttribute('class', 'container');
label = 'Centered';
// next alingment;
alignment = 'right';
break;
// align to right
case 'right':
container.setAttribute('class', 'container to-right');
label = 'Right Aligned';
// next alingment;
alignment = 'bottom';
break;
// align to bottom
case 'bottom':
container.setAttribute('class', 'container to-bottom');
label = 'Bottom Aligned';
// next alingment;
alignment = 'left';
break;
// align to left
case 'left':
container.setAttribute('class', 'container to-left');
label = 'Left Aligned';
// next alingment;
alignment = 'top';
break;
// align to top
case 'top':
container.setAttribute('class', 'container to-top');
label = 'Top Aligned';
// next alingment;
alignment = 'center';
break;
}
toggleButton.innerHTML = label;
updateDataList();
}
toggleButton.addEventListener('click', function() {
alignContainer();
});
// update the data list according to the given data
var list = document.querySelector('.data');
function updateDataList(data) {
var bounds = getBounds();
var offset = getOffset();
var currentWidth = bounds.width;
var currentHeight = bounds.height;
var scaleX = currentWidth / originalWidth;
var scaleY = currentHeight / originalHeight;
var value;
var mouse;
var mouseScaledX;
var mouseScaledY;
// update original dimensions
value = 'width: ' + originalWidth + 'px, height: ' + originalHeight + 'px';
list.querySelector('.original .value').innerHTML = value;
// update scale
value = 'x: ' + scaleX + ', y: ' + scaleY;
list.querySelector('.scale .value').innerHTML = value;
// update bounds
value = 'x: ' + bounds.x + 'px, y: ' + bounds.y + 'px, ' +
'width: ' + bounds.width + 'px, height: ' + bounds.height + 'px';
list.querySelector('.bounds .value').innerHTML = value;
// update mouse
if (data && data.mouse) {
mouse = data.mouse;
mouseScaledX = mouse.unscaled.x * (1 / scaleX);
mouseScaledY = mouse.unscaled.y * (1 / scaleY);
value = 'unscaledX: ' + mouse.unscaled.x + 'px, unscaledY: ' + mouse.unscaled.y + 'px, ' +
'scaledX: ' + mouseScaledX + 'px, scaledY: ' + mouseScaledY + 'px';
list.querySelector('.mouse .value').innerHTML = value;
}
}
// initially align container
alignContainer();
// update data according to the event
canvas.addEventListener('mousemove', (e) => {
var mouseX = e.clientX - canvas.offsetLeft;
var mouseY = e.clientY - canvas.offsetTop;
updateDataList({
mouse: {
unscaled: {
x: mouseX,
y: mouseY
}
}
});
});