Menu
I have been looking at tutorials and yet I can't seem to figure out where I'm going wrong. This seems like it should be very straight forward yet it's giving me problems. Below is some simple code for creating a mouse listener for a canvas object. Currently function clickReporter is not being called when the canvas is clicked. Any ideas on why not?
HTML5
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Play Area 2 - Mouse Events and the Canvas</title>
<script src="play_area_2.js" type="text/javascript"></script>
</head>
<body onload="init();">
<canvas id="myCanvas" width="500" height="400">
Your browser dosen't support the HTML5 canvas.</canvas><br />
</body>
</html>
JavaScript
var canvas;
var context;
function init() {
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
drawBox();
canvas.addEventListener('onclick', clickReporter, false);
}
function clickReporter(e) {
alert("clicked");
}
function drawBox() {
context.fillStyle = "black";
context.strokeRect(20, 20, canvas.width-20, canvas.height-20);
}
899
Mouse Events and the HTML5 Canvas You can also detect a mouse click on your canvas. Again, this is done with addEventListener. There are quite a few mouse events you can detect: mousedown, mouseup, mousemove, mouseout and mouseover.
There are three ways to attach an event listener to an object in JavaScript: Through element.addEventListener. When you use this, you specify the event name you want to set. Through element.onsomeevent (onclick, onmouseover, ontouchstart). This is an older convention which is fully standard and supported in HTML5. Through the HTML itself.
You can also detect a mouse click on your canvas. Again, this is done with addEventListener. There are quite a few mouse events you can detect: mousedown, mouseup, mousemove, mouseout and mouseover. As an example, here's some code that detects the mousedown event: The BODY tag calls an onLoad function. Inside of this function we have this:
HTML5 Canvas. ❮ Previous Next ❯. The HTML <canvas> element is used to draw graphics on a web page. The graphic to the left is created with <canvas>. It shows four elements: a red rectangle, a gradient rectangle, a multicolor rectangle, and a multicolor text. The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.
You should be using 'click' and not 'onclick'. "on" is only used when setting it as a property (e.g., canvas.onclick = clickReporter).
canvas.addEventListener('click', clickReporter, false);
UPDATE
More details on click vs. onclick.
There are three ways to attach an event listener to an object in JavaScript:
Through element.addEventListener. When you use this, you specify the event name you want to set. For example, 'click', or 'mouseover', or 'touchstart'. In this case, you're specifying the event's actual name. This is useful because you can add more than one listener to an event.
canvas.addEventListener('click', clickReporter, false);
canvas.addEventListener('click', otherClickReporter, false);
// Both clickReporter and otherClickReporter will be called on a click event.
Through element.onsomeevent (onclick, onmouseover, ontouchstart). This is an older convention which is fully standard and supported in HTML5. This is a very easy way to set the event listener but it has its drawbacks. Only one event listener can be set at a time with this method:
canvas.onclick = clickReporter;
canvas.onclick = otherClickReporter;
// Only otherClickReporter will be called on a click event.
Through the HTML itself. This is where all the conventions started. You can define an event directly in the HTML very much like the previous example:
<canvas onclick="clickReporter()"></canvas>
This is the same as the following, assuming that clickReporter gets attached to the window object.
<canvas></canvas>
<script>
canvasWeJustCreated.onclick = function() {clickReporter();}
</script>
Arguably the way you are doing it is the best way. There will certainly be cases where you want to use the other methods, like when generating a page on the server or trying to temporarily suppress scrolling on an iPhone, but for most applications, addEventListener is best.
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
