[whatwg] '' <canvas> element "selection buffer"

[Mathieu HENRI]

Ondřej Žižka wrote:
> Hi,
> 
> I've been looking for something similar to OpenGL's selection buffer - that is, you can get some object ID for the given coordinates.
> 
> E.g.,  Jacob Seidelin's chess game http://blog.nihilogic.dk/search/label/chess could use it, but instead, keyboard control had to be used.

My solution to this type of problem is to render the scene on a 
(ObjectID) back buffer using a single color per object ( which serves as 
ID ), and retrieve the color where the user clicked.

Simple, relatively fast and it works for any type of graphics.

It's more or less a work around but it has worked for years, on various 
platforms, and is usually very fast. Plus approximate versions of the 
objects  can be used in the OID buffer to gain in speed and help the 
user ( e.g. simplify and inflate the objects to make them easier to 
point at )


> isPointInPath() does not solve the problem effectively if the path would be too complex - e.g. pixel-based sprites in several layers.
> 
> For an example of what I want to implement, see e.g.
> http://www.openttd.org/screens.php?image=images/screens/0.5.0/japan_national_railway_3_aug_1984 .
> Mathematical computation of the object is principially impossible (or too complex in best case).
> 
> 
> So, my suggestion is to add functionality similar to OpenGL's selection buffer:
> The canvas element would keep a 2D array with an integer ID for each pixel. When turned on, these values would be set by every operation that changes the pixel, seting it to the current context's value. Pseudo-code example:
> 
> ------------
> function DrawCell( iCellId ){
> 
>   canvas.selectionBuffer.trackChanges( ON );
>   canvas.selectionBuffer.setFillValue( iCellId );
> 
>   canvas.drawRasterImage( ..., cellImage );
> 
>   canvas.selectionBuffer.trackChanges( OFF );
> 
> }
> ------------
> 
> Then, upon user's mouse click on the canvas, you could determine which object was clicked:
> 
> ------------
> canvas.onclick = function( e ){
>   id = canvas.selectionBuffer.getIdAt( e.x, e.y );
>   // eventually:
>   id = e.selectionBufferID;
> }
> ------------
> 
> Such feature would allow interactive application with isometric or 3D graphic.
> Is something like this planned or already suggested? I haven't found.
> 
> Regards,
> Ondra Zizka
> 


-- 
Mathieu 'p01' HENRI
JavaScript developer, Opera Software ASA