CODEWITHSUNDEEP
javascriptcanvasresize
Bonked
Bonked

Reputation: 39

Canvas object positioning issue - JS

l believe to have a error of sorts.

Visually, the button goes off the SCREEN instead of sitting in it's spot. The issue is the X positioning of the canvas object, being the '<button>', as it moves off screen when you resize the browser window from the LEFT but also the button does NOT MOVE and STAYS IN ITS PLACE when resizing the browser window from the RIGHT.

Essentially, the canvas object, 'button', should be secured in one place so that it stays in the same spot no matter how big or small my browser's window is.

There is also a reproducible demo.

var canvas = document.getElementById("c");

var ctx = canvas.getContext("2d");

var the_button = document.getElementById("the_button");
var the_background = document.getElementById("the_background");


var button_imageLeft = 1100;
var button_imageBottom = 150;
var button_imageWidth = 170;
var button_imageHeight = 100;
var button_offsetX, button_offsetY;

window.onload = function() {
  ctx.drawImage(the_background, 0, 0, canvas.width, canvas.height);
  drawButton();
}

initialize();


function initialize() {
  window.addEventListener('resize', resizeCanvas, false);
  resizeCanvas();
}

function drawButton() {
  button_offsetX = button_imageLeft;
  button_offsetY = canvas.height - button_imageBottom;
  ctx.drawImage(the_button, button_offsetX, button_offsetY, button_imageWidth, button_imageHeight);
}

function redraw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(the_background, 0, 0, canvas.width, canvas.height);
  drawButton();
}

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  redraw();
}

the_button_function = (event) => {
  const {
    x,
    y
  } = event;
  if ((x >= button_offsetX && x < (button_offsetX + button_imageWidth)) &&
    (y >= button_offsetY && y < (button_offsetY + button_imageHeight))) {
    alert("<Button>")

  }
}

canvas.addEventListener('click', (e) => the_button_function(e));
html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  border: 0;
  overflow: hidden;
  display: block;
}
<html>
<canvas id="c"></canvas>

<img style="display: none;" id="the_button" src="https://i.imgur.com/wO7Wc2w.png" />

<img style="display: none;" id="the_background" src="https://img.freepik.com/free-photo/hand-painted-watercolor-background-with-sky-clouds-shape_24972-1095.jpg?size=626&ext=jpg" />

</html>

Upvotes: 1

Views: 55

Answers (1)

Helder Sepulveda
Helder Sepulveda

Reputation: 17594

You are setting anchors on the bottom and left as far as I can see your code for placing the button is correct, the only reason why it will "move off screen" is because the size of the window is less than the left value, I made a few changes to your code.

If you are drawing images you should be using onload or you risk executing the drawImage when the image is not really loaded yet, and that might make it look like it is off screen

window.addEventListener('resize', resizeCanvas, false);
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");

var btn = {left: 10, bottom: 60, width: 85, height: 50};
var btnImg = document.getElementById("the_button");
btnImg.onload = drawButton;
resizeCanvas()

function drawButton() {
  btn.x = btn.left;
  btn.y = canvas.height - btn.bottom;
  ctx.drawImage(btnImg, btn.x, btn.y, btn.width, btn.height);
}

function redraw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawButton();
}

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  redraw();
}

the_button_function = (event) => {
  const { x, y } = event;
  if ((x >= btn.x && x < (btn.x + btn.width)) &&
    (y >= btn.y && y < (btn.y + btn.height))) {
    alert("<Button>")
  }
}
canvas.addEventListener('click', (e) => the_button_function(e));
html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  border: 0;
  overflow: hidden;
  display: block;
}
<html>
<canvas id="c"></canvas>

<img style="display: none;" id="the_button" src="https://i.imgur.com/wO7Wc2w.png" />

</html>

Your code is only for left and bottom ...
If you wanted to instead anchor to the right and, top you will need to change your logic:

  btn.x = btn.left;
  btn.y = canvas.height - btn.bottom;

But as is it works fine for left bottom, I do not see a problem with that.

Upvotes: 2

Related Questions