How do I add a simple onClick event handler to a canvas element

Question

I m an experienced Java programmer but am looking at some JavaScript HTML5 stuff for the first time in about a decade   I m completely stumped on what should be the simplest thing ever   As an example I just wanted to draw something and add an event handler to it   I m sure I m doing something stupid  but I ve searched all over and nothing that is suggested  e g  the answer to this question   Add onclick property to input with JavaScript  works   I m using Firefox 10 0 1   My code follows   You ll see several commented lines and at the end of each is a description of what  or what doesn t  happen   What s the correct syntax here   I m going crazy    lt html gt   lt body gt       lt canvas id  myCanvas  width  300  height  150   gt       lt script language  JavaScript  gt          var elem   document getElementById  myCanvas               elem onClick   alert  hello world     - displays alert without clicking            elem onClick   alert  hello world     - displays alert without clicking            elem onClick    alert  hello world       - does nothing  even with clicking            elem onClick   function     alert  hello world         - does nothing            elem onClick   function     alert  hello world         - does nothing         var context   elem getContext  2d            context fillStyle     05EFFF           context fillRect 0  0  150  100        lt  script gt    lt  body gt

User · Answer

I recommand the following article   Hit Region Detection For HTML5 Canvas And How To Listen To Click Events On Canvas Shapes which goes through various situations   However  it does not cover the addHitRegion API  which must be the best way  using math functions and or comparisons is quite error prone   This approach is detailed on developer mozilla

User · Answer

When you draw to a canvas element  you are simply drawing a bitmap in immediate mode   The elements  shapes  lines  images  that are drawn have no representation besides the pixels they use and their colour   Therefore  to get a click event on a canvas element  shape   you need to capture click events on the canvas HTML element and use some math to determine which element was clicked  provided you are storing the elements  width height and x y offset   To add a click event to your canvas element  use     canvas addEventListener  click   function        false     To determine which element was clicked     var elem   document getElementById  myCanvas        elemLeft   elem offsetLeft   elem clientLeft      elemTop   elem offsetTop   elem clientTop      context   elem getContext  2d        elements           Add event listener for  click  events  elem addEventListener  click   function event        var x   event pageX - elemLeft          y   event pageY - elemTop          Collision detection between clicked offset and element      elements forEach function element            if  y  gt  element top  amp  amp  y  lt  element top   element height               amp  amp  x  gt  element left  amp  amp  x  lt  element left   element width                alert  clicked an element                          false       Add element  elements push       colour    05EFFF       width  150      height  100      top  20      left  15         Render elements  elements forEach function element        context fillStyle   element colour      context fillRect element left  element top  element width  element height          jsFiddle   This code attaches a click event to the canvas element  and then pushes one shape  called an element in my code  to an elements array  You could add as many as you wish here   The purpose of creating an array of objects is so we can query their properties later  After all the elements have been pushed onto the array  we loop through and render each one based on their properties   When the click event is triggered  the code loops through the elements and determines if the click was over any of the elements in the elements array  If so  it fires an alert    which could easily be modified to do something such as remove the array item  in which case you d need a separate render function to update the canvas     For completeness  why your attempts didn t work     elem onClick   alert  hello world       displays alert without clicking   This is assigning the return value of alert   to the onClick property of elem  It is immediately invoking the alert     elem onClick   alert  hello world        displays alert without clicking   In JavaScript  the   and   are semantically identical  the lexer probably uses      for quotes   elem onClick    alert  hello world         does nothing  even with clicking   You are assigning a string to the onClick property of elem   elem onClick   function     alert  hello world           does nothing   JavaScript is case sensitive  The onclick property is the archaic method of attaching event handlers  It only allows one event to be attached with the property and the event can be lost when serialising the HTML   elem onClick   function     alert  hello world           does nothing   Again

User · Answer

You can also put DOM elements  like div on top of the canvas that would represent your canvas elements and be positioned the same way    Now you can attach event listeners to these divs and run the necessary actions

User · Answer

Probably very late to the answer but I just read this while preparing for my 70-480 exam  and found this to work -   var elem   document getElementById  myCanvas    elem onclick   function     alert  hello world        Notice the event as onclick instead of onClick   JS Bin example

User · Answer

As an alternative to alex s answer    You could use a SVG drawing instead of a Canvas drawing  There you can add events directly to the drawn DOM objects    see for example   Making an svg image object clickable with onclick  avoiding absolute positioning

User · Answer

Alex Answer is pretty neat but when using context rotate it can be hard to trace x y coordinates  so I have made a Demo showing how to keep track of that   Basically I am using this function  amp  giving it the angle  amp  the amount of distance traveled in that angel before drawing object   function rotCor angle  length       var cos   Math cos angle       var sin   Math sin angle        var newx   length cos      var newy   length sin       return           x   newx          y   newy

User · Answer

As another cheap alternative on somewhat static canvas  using an overlaying img element with a usemap definition is quick and dirty   Works especially well on polygon based canvas elements like a pie chart

[javascript] How do I add a simple onClick event handler to a canvas element?

Examples related to javascript

Examples related to html

Examples related to canvas

Examples related to event-handling

Examples related to onclick