
- HTML Tutorial
- HTML - Home
- HTML - Overview
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Comments
- HTML - Images
- HTML - Tables
- HTML - Lists
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Frames
- HTML - Iframes
- HTML - Blocks
- HTML - Backgrounds
- HTML - Colors
- HTML - Fonts
- HTML - Forms
- HTML - Embed Multimedia
- HTML - Marquees
- HTML - Header
- HTML - Style Sheet
- HTML - Javascript
- HTML - Layouts
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- HTML - Fonts Ref
- HTML - Events Ref
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
How do I add a simple onClick event handler to an HTML5 canvas element?
The elements that are drawn in canvas element have no representation. Their only representation is the pixels they use and their color. Drawing to a canvas element means drawing a bitmap in immediate mode. To get a click event on a canvas element (shape), you need to capture click events on the canvas HTML element and determine which element was clicked. This requires storing the element’s width and height.
To add a click event to your canvas element, use the below-given code
canvas.addEventListener('click', function() { }, false);
Example
To determine what element was clicked, use the following code snippet −
var e = document.getElementById('myCanvas'), elemLeft = e.offsetLeft, elemTop = e.offsetTop, context = e.getContext('2d'), elements = []; // event listener for click event e.addEventListener('click', function(event) { var xVal = event.pageX - elemLeft, yVal = event.pageY - elemTop; console.log(xVal, yVal); elements.forEach(function(ele) { if (yVal > ele.top && yVal < ele.top + ele.height && xVal > ele.left && xVal < ele.left + ele.width) { alert(‘element clicked'); } }); }, false); elements.push({ colour: '#1C2128’, width: 250, height: 200, top: 30, left: 20 }); elements.forEach(function(ele) { context.fillStyle = element.colour; context.fillRect(ele.left, ele.top, ele.width, ele.height); });
- Related Articles
- How to add an event handler to an element in JavaScript HTML DOM?
- How do I pass an event handler to a component in ReactJS?
- How to add an event handler to the specified element in JavaScript?\n
- HTML5 / JS storage event handler
- How do I make a transparent canvas in HTML5?
- How do I add a simple jQuery script to WordPress?
- How can I alter the color of an HTML5 canvas element using jQuery?
- How to call a JavaScript function from an onClick event?
- How to use multiple click event on HTML5 canvas?
- How can I use the HTML5 canvas element in IE?
- Print a HTML5 canvas element
- How do I add an element to an array list in Java?
- How can I get onclick event on webview in Android?
- Measure text height on an HTML5 canvas element
- How to pass an argument to the event handler in Tkinter?

Advertisements