Databases
StackOverflow2013
Postsdbo
POmouse event is not defined
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POmouse event is not defined
    primarykey
    data
    text
    <p>I have an HTML5 canvas on a web page, with a JavaScript function that draws an image on the canvas. I'm trying to add a mouse event to the image, so that when it is clicked, another JavaScript function that is called, which will update what is displayed on the canvas.</p> <p>When viewing the page in Firefox, nothing happens when I click the image that's displayed on the canvas. I'm using Firebug to try and see what's wrong, and it's given me the following message:</p> <pre><code> mouse_event is not defined drawStartButton()index.html (line 107) startGame()index.html (line 64) (?)()index.html (line 1) event = load [Break On This Error] ...useX = (mouse_event.clientX-boundingBox.left) * (myGameCanvas.width/boundingBox.... index.html (line 107) </code></pre> <p>The function I've used to draw the start button on the canvas, and mouse event I've added are below:</p> <pre><code>function drawStartButton(){ image.onload = function(){ context.drawImage(image, 260.5, 60); }; image.src = "StartButton.png"; /** Now I need to add an event listener to the area of the canvas on on which the button image is displayed, in order to 'listen' for a click on the button */ var boundingBox = myGameCanvas.getBoundingClientRect(); var mouseX = (mouse_event.clientX-boundingBox.left) * (myGameCanvas.width/boundingBox.width); var mouseY = (mouse_event.clientY-boundingBox.top) * (myGameCanvas.height/boundingBox.height); var pixels = context.getImageData(mouseX, mouseY, 1, 1); } </code></pre> <p>Basically, all I want to do, is that when the user clicks the button, the function below will be called, and will update the contents of the canvas:</p> <pre><code>function drawLevelOneElements(){ var context = canvas.getContext("2d"); /* Draw the images for numbers 1-10.*/ var image1 = new Image(); /* Test that this code is being executed */ context.moveTo(300, 300); context.font = "11pt Calibri"; context.strokeStyle = "black"; context.strokeText("Testing",300, 300); /* End of test */ image1.onLoad = function(){ context.drawImage(image1, 50, 50); }; image1.src="1.png"; } </code></pre> <p>Thanks for your help. :)</p> <p>*<strong><em>Update</em>**</strong></p> <p>It seems I was able to solve this by putting the variables mouseX, mouseY and pixels in a function and setting the boundingBox.onmousemove property equal to this function:</p> <pre><code>boundingBox.onmousemove = function(e){ var mouseX = e.pageX - this.offsetLeft; var mouseY = e.pageY - this.offsetTop; var pixels = context.getImageData(mouseX, mouseY, 1, 1); } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USSomeone2088
    1. USSomeone2088
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COYou never assign anything to `mouse_event`
      singulars
      1. POmouse event is not defined
      1. USThiefMaster
    2. COOk, I seem to have fixed the mouse_event part, but I now have another problem with a different part of my code: The page now loads, with the canvas and the button displayed correctly, however, when I click the button, the console shows an error saying that click is not defined, and that in the function below, 'collides' is not defined. Any idea what I'm doing wrong? The function is:
      singulars
      1. POmouse event is not defined
      1. USSomeone2088
    3. COfunction startGame(){ drawGameElements(); drawStartButton(); /* Now need to add an event listener to call drawLevelOneElements() when the start button is clicked. */ //myGameCanvas.addEventListener("click", drawLevelOneElements, false); //drawLevelOneElements(); //game_id=setInterval(game_loop, 50);
      singulars
      1. POmouse event is not defined
      1. USSomeone2088
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload