Re: correct and incorrect uses of canvas

For what it's worth, I do think that while a lot of these are
"invalid" uses of canvas, I think we need to have a better
accessibility story for them. In particular, one situation which is
common, and is likely to remain common, is JS libraries, such as
processing.js which output to canvas. We can and should improve the
SVG DOM to attract more people, but I suspect there will always be a
group of people that choose to use canvas anyway due to better
performance or other reasons.

So I do think we need to add some sort of API which lets you declare a
region on the canvas which can be used for hit testing. Possibly do
that by being able to associate a region with an element in the
contained DOM inside the canvas. This would also integrate well with
things like screen magnifiers zooming in on the correct region of the
canvas when the relevant node in the contained DOM receives focus.

Ideally setting the area covered by one of these regions should be
easy to set while performing one or more drawing operations.

Adding something like:

interface CanvasRenderingContext2D {
...
  void setDrawingFor(in Element target);
  void clearRegionFor(in Element target);
  void clearAllRegions();
...
};

might go a long way API wise. The clearRegionFor would remove any
region associations for the given element. setDrawingFor would cause
"all drawing operations" to add to the area associated with that
element. We'd of course have to define what "all drawing operations"
mean here. clearAllRegions() would clear all region associations.
Removing an element from the DOM contained inside the canvas, for
example using removeChild, would act as if clearRegionFor had been
called with that element passed in. Calling setDrawingFor(null) would
allow drawing things that should not be associated with any element.

Once a region has been associated with an element, it would act
similarly to how a <label> acts. So clicking that region would
dispatch a "click" event to the element and hovering it would dispatch
"mouseover" etc.

There are of course lots of unanswered questions, such as if focus
outlines should automatically be drawn by the UA if an element with an
associated region is focused. But the above might be a start.

/ Jonas

On Tue, Jul 12, 2011 at 12:28 PM, Steve Faulkner
<faulkner.steve@gmail.com> wrote:
> hi all,
>
> Accepting that text editing in canvas is not a good idea and buidling
> traditional complex UIs in canvas is not a good idea.
>
> Is the use of interactivity in canvas appropriate in any circumstance?
>
> For example are the following correct or incorrect uses of canvas?
>
> interactive graph
> http://thejit.org/static/v20/Jit/Examples/ForceDirected/example1.html
>
> drag and drop, resizable objects
> http://kangax.github.com/fabric.js/demos/customization/index.html
>
> UI Dial With Snaps
> http://bocoup.com/processing-js/docs/?page=UI%20Dial%20with%20Snaps
>
> Visual Knowledge Browser
> http://askken.heroku.com/
>
> Handling Click Events On Chart
> http://www.deensoft.com/lab/protochart/clickevent.php
>
> drag and drop
> http://easeljs.com/examples/dragAndDrop.html
>
> Sumon WebGL (2d canvas animation fallback)
> http://labs.hyperandroid.com/sumon-webgl
>
> Sunburst of a Directory Tree
> http://thejit.org/static/v20/Jit/Examples/Sunburst/example2.html
>
> letter pair analysis
> http://www.m-i-b.com.ar/letters/en/
>
> If  the above are not considered misuses of canvas, does the current canvas
> 2d spec provide the means to expose the required information to make the
> above accessible to users of AT?
>
> If they are misuses of canvas how can we convince developers not to use
> canvas in these ways?
>
>
> regards
> Stevef
>

Received on Thursday, 14 July 2011 20:41:24 UTC