Databases
StackOverflow2013
Postsdbo
POThree mouse detection techniques for HTML5 canvas, none adequate
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POThree mouse detection techniques for HTML5 canvas, none adequate
    primarykey
    data
    text
    <p>I've built a canvas library for managing scenes of shapes for some work projects. Each shape is an object with a drawing method associated with it. During a refresh of the canvas, each shape on the stack is drawn. A shape may have typical mouse events bound which are all wrapped around the canvas' own DOM mouse events.</p> <p>I found some techniques in the wild for detecting mouseover on individual shapes, each of which works but with some pretty serious caveats. </p> <ol> <li><p>A cleared ghost canvas is used to draw an individual shape by itself. I then store a copy of the ghost canvas with <code>getImageData()</code>. As you can imagine, this takes up a LOT of memory when there are many points with mouse events bound (100 clickable shapes on a 960x800 canvas is ~300MB in memory).</p></li> <li><p>To sidestep the memory issue, I began looping over the pixel data and storing only addresses to pixels with non-zero alpha. This worked well for reducing memory, but dramatically increased the CPU load. I only iterate on every 4th index (RGBA), and any pixel address with a non-zero alpha is stored as a hash key for fast lookups during mouse moves. It still overloads mobile browsers and Firefox on Linux for 10+ seconds.</p></li> <li><p>I read about a technique where all shapes would be drawn to one ghost canvas using color to differentiate which shape owned each pixel. I was really happy with this idea, because it should theoretically be able to differentiatate between millions of shapes.</p> <p>Unfortunately, this is broken by anti-aliasing, which cannot be disabled on most canvas implementations. Each fuzzy edge creates dozens of colors which might be safely ignored except that /they can blend/ with overlapping shape edges. The last thing I want to happen when someone crosses the mouse over a shape boundary is to fire semi-random mouseover events for unrelated shapes associated with colors that have emerged from the blending due to AA.</p></li> </ol> <p>I know that this not a new problem for video game developers and there must be fast algorithms for this kind of thing. If anyone is aware of an algorithm that can resolve (realistically) hundreds of shapes without occupying the CPU for more than a few seconds or blowing up RAM consumption dramatically, I would be very grateful.</p> <p>There are two other Stack Overflow topics on mouseover detection, both of which discuss this topic, but they go no further than the 3 methods I describe. <a href="https://stackoverflow.com/questions/1221347/detect-mouseover-of-certain-points-within-an-html-canvas">Detect mouseover of certain points within an HTML canvas?</a> and <a href="https://stackoverflow.com/questions/6505765/mouseover-circle-html5-canvas">mouseover circle HTML5 canvas</a>.</p> <p><strong>EDIT: 2011/10/21</strong></p> <p>I tested another method which is more dynamic and doesn't require storing anything, but it's crippled by a performance problem in Firefox. The method is basically to loop over the shapes and: 1) clear 1x1 pixel under mouse, 2) draw shape, 3) get 1x1 pixel under mouse. Surprisingly this works very well in Chrome and IE, but miserably under Firefox. </p> <p>Apparently Chrome and IE are able to optimize if you only want a small pixel area, but Firefox doesn't appear to be optimizing at all based on the desired pixel area. Maybe internally it gets the entire canvas, then returns your pixel area.</p> <p>Code and raw output here: <a href="http://pastebin.com/aW3xr2eB" rel="nofollow noreferrer">http://pastebin.com/aW3xr2eB</a>.</p> <p><img src="https://i.stack.imgur.com/x8y5c.png" alt="Canvas getImageData() Performance (ms)"></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USjcampbelly
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POThree mouse detection techniques for HTML5 canvas, none adequate
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POThree mouse detection techniques for HTML5 canvas, none adequate
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POThree mouse detection techniques for HTML5 canvas, none adequate
      1. This table or related slice is empty.
      1. VTUpMod
    1. COPersonally I would just switch to using SVG. It's more what it was made for. However it may be worth looking at EaselJS (easeljs.com) source. There's a method `Stage.getObjectUnderPoint()`, and their demo's of this seem to work perfectly fine.
      singulars
      1. POThree mouse detection techniques for HTML5 canvas, none adequate
      1. USBen Fleming
 

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