CODEWITHSUNDEEP
javascriptcanvas
Bonked
Bonked

Reputation: 39

Issue related to event listener on canvas object within a canvas & additional issue

Main Issue:

l essentially want to figure the issue with my event listener as it is aligning with the canvas object, which is the image '', in the middle of the canvas however, the Y areas below it are still clickable and the X areas on the right of it are still clickable.

l would like to eliminate this issue, which l believe is being caused by my IF statement and the DRAWIMAGE conditions, in relation to my canvas. There is a reproducible demo, fullscreen/expand it to see.

Another issue:

Another thing to note, which would be much appreciated, is the canvas object not truly sticking in one position on the canvas when you resize the browser window. It simply moves off into a different direction even though it should be stuck in one area of the canvas no matter what size my browser's window is - meaning that the canvas object somehow needs to dynamically resize along with how my browser resize + the event listener needs to see it. Again this would be highly appreciated as l really want to understand the error of my logic as l might using the wrong coordinate system,i don't really know :/

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_imageX = 600;
var button_imageY = 390;

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() {
  /* l belive this is partly responsible aswell for the issue */
  ctx.drawImage(the_button, button_imageX, canvas.height - button_imageY, 170, 100);

}

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 = (paramater1) => {
  /* Problem lies here in the IF statement aswell, that's my guess */
  if ((paramater1.x > (canvas.width - button_imageX)) && (paramater1.x < canvas.width) && (paramater1.y > (canvas.height - button_imageY)) && (paramater1.y < canvas.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" />

<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: 0

Views: 363

Answers (1)

traktor
traktor

Reputation: 19301

To stop clicks responding to the right of and below the button, take into account the width and height of the button!

Fixing this, and knowing where the image was previously drawn on the canvas should fix the second issue. To debug the problem the snippet code below replaces

  • button_imageX with button_imageLeft - how many pixels from canvas left to draw the image.
  • button_imageY with button_imageBottom - how many pixels from canvas bottom to draw the top of the image. (This seemed to be how the posted code was positioning the button in the y direction.)

[image_bottonLeft and image_buttonBottom values were modified for seeing results on Stack Overflow.]

And introduced

  • button_offsetX - x position of where the left hand side of the button was last drawn
  • button_offsetY - y position of where the top of the button was last drawn
  • button_imageWidth and button_imageHeight values for button height and width, replacing hard coded values function drawButton.

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 = 100;
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;
}
<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" />

Upvotes: 1

Related Questions