[whatwg] Canvas v5 API additions

[Charles Pritchard]

On 3/28/2012 2:41 PM, Ian Hickson wrote:
>> Currently, authors can create a large canvas, and place it in a div:
>> >  <div style="overflow: hidden">
>> >  <canvas>This can is larger than the div</canvas>
>> >  </div>
...
> >  The idea here is to enable scroll with limited height/width canvas layer
> >  to work well.
> >  
>
> I don't really understand the use case here. Could you elaborate?


Canvas authors often minimize the amount of memory they use in 
applications by limiting the number of layers and the width and height 
of the Canvas.

The following code is meant to explain, it is not valid code.

Where in HTML, we may have a div with scroll overflow:
<div style="width: 300%; height: 100%">My presentation of things</div>

In Canvas we will often use a canvas with virtual overflow [synthetic 
scroll bars]:
<canvas style="width: 100%; height: 100%"></canvas> then synthetic 
scroll bars and we repaint the canvas.
It's quite a bit easier to simply use native scroll bars, but native 
scroll bars have many quirks across vendors.

The easier route is usually to use a div with native scrolling and a 
larger canvas:
<div style="width: 100%; height: 100%; overflow-x: scroll'"><canvas 
style="width: 300%; height: 100%"></canvas></div>

For some cases, it would be nice to have synthetic overflow better 
integrated with the browser and apis:
<canvas style="width: 100%; height: 100%" 
onscroll="repaint(this.scrollLeft, this.scrollTop)"></canvas>

Setting scrollLeft or scrollTop would trigger onscroll() as it does for 
other overflow elements.
The semantic is available.

-Charles