JAVASCRIPT

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
      }
    }
  });
});