Mouse input guidance needed

1

I’m working on a program in which I need to use mouse input, and once I learn that, I’ll be putting it in the following program:
https://www.sagebrushtidbits.com/pythagorean11.html

Where I’m having trouble, is getting mouse input. There’s a good example of mouse input on page 261 of Canvas from Noob to Ninja, but my placing it within the working code must be where I’m going wrong. So…if there’s an example of the full text of an example of this, would someone mind pointing it out to me? The direction I’m heading is to have someone click on the box (in my example above) and then an answer w/ steps is shown. Thanks, for any suggestions.

2

I dont have access to that book, so Ill just respond with what I know.

Canvas doesnt have elements like html so you have to handle checking where the mouse was clicked and checking if its within a hit area that you want to see as button/woteva.
So you need to define the areas you want to check against and then check to see if the mouse was clicked in one.
Heres some example code and a working Demo…

			// Coordinates of hit boxs to check against
			let hitBoxs = {
				blueBox: {
					x: 250,
					y: 500,
					width: 100,
					height: 100
				}
			};
			
			// Loops through hitBoxs and checks to see if the mouse was clicked within one
			// If so then return the name of it
			// Will return the first one defined in hitBoxs if some overlap
			function hitCheck(event, hitBoxs){
				// Get the x/y position of the mouse inside the canvas
				let rect = event.target.getBoundingClientRect();
				let x = event.clientX - rect.left;
				let y = event.clientY - rect.top;
				// Loop through the hitBoxs and check to see if the x/y is within the cords of the box
				// If so then return the name of the hit box that was clicked
				for (let box of Object.keys(hitBoxs)){
					if (x > hitBoxs[box].x && x < hitBoxs[box].x+hitBoxs[box].width && y > hitBoxs[box].y && y < hitBoxs[box].y + hitBoxs[box].height) return box;
				}
			}

				// Add a click event to canvas and check for hits within the hit boxs
			canvas.addEventListener("click", function (event) {
				// Check to see if a box was hit
				let hitBox = hitCheck(event, hitBoxs);
				// If a box was hit
				if (hitBox){
					// Then respond to which box was hit
					if (hitBox=="blueBox"){
						alert("You clicked on the blueBox!");
					}
				}
			});

EDIT:
Also while Im here…
The perfect thing to have done this in would have been SVG. When resizing for a larger display the canvas will be enlarged and things can look a little blurry, with svg the whole thing would be redrawn and look crisp. SVG has elements, so you could easily make things clickable.
You didnt have to do all that to get the power of numbers drawn. There are unicode characters you could have used for that. Ive updated the Demo to show you how to use them.

3

Thanks so much! The demo works perfectly when I access it there, but when I do a copy/paste to Dreamweaver 8 to run it, it shows a syntax error at line 116, or sometimes 115. Something I’m doing wrong there. But your help is greatly appreciated. I’ll look into the SVG and again at the unicode. The unicode worked fine when I’d run it in Dreamweaver 8, but when I put it on my actual website, it produced different results. I’ve used the code in the past, and it worked no problem.

4

@Willwrtr - something that would help is if you could share the URL to the page where the error is happening? This would allow us to look in more detail at the error and point out what may be happening there :slight_smile: