stage/canvas dimensions

[meibegger]

What is the logic behind the setting of the stage and canvas dimensions? If i, for instance, set

<canvas id="stage" width="720" height="800"></canvas>

it will result in

<canvas id="stage" width="1440" height="1600" tabindex="1" style="outline: none; width: 720px; height: 800px;"></canvas>

Why is the width & height doubled? And how can i prevent StageXL from setting the tabindex? Maybe i don't want people to be able to tab to the stage (because there's nothing to tab to), or maybe i would need a tabindex="0" ... (i think, tabindex=1 will almost never be convenient ...?)

---

If i now set

<canvas id="stage"></canvas>

and

stage = new Stage(canvas, width: 720, height: 490);

then the canvas is set to this

<canvas id="stage" tabindex="1" width="600" height="300" style="outline: none; width: 300px; height: 150px;"></canvas>

which looks like some default value and has nothing to do with the stage dimensions ... Wouldn't it in this case make sense to set the canvas width and height attributes according to the stage width/height? This would be very convenient, because then i could specify the dimensions (aspect ratio) once in the dart project, and the canvas would be prepared accordingly (now i have to set those dimensions twice, even if they are the same). I could set

<canvas style="width:100%;height:auto;background:#FFF;"></canvas>

and

stage = new Stage(canvas, width: 400, height: 300);

this would/should/could transform to

<canvas width="400" height="300" style="width:100%;height:auto;background:#FFF;"></canvas>

and voila: everything perfectly scalable :)

---

And i found a bug: setting

<canvas id="stage" width="100%" height="100%"></canvas>

results in

<canvas id="stage" width="200" height="200" tabindex="1" style="outline: none; width: 100px; height: 100px;"></canvas>

Thanks! :)

[bp74]

Hi, to answer all those questions there are quite a few things to know.

Please start with the "Scaling the Stage" article: http://www.stagexl.org/docs/wiki-articles.html?article=stagescale

There is a difference between the width/height of the canvas and the width/height of the stylesheet. The width/height of the canvas defines the physical pixels of the canvas and the width/height of the stylesheet defines the visual size of the stage. If you have a normal display both values are the same, but if you have a retina display (HiDPI display) the values are different. For example if you have "devicePixelRatio" of 2.0 the width/height of the canvas is doubled to the width/height of the stylesheet.

The best practice is to set the width/height of the stylesheet but not the width/height of the canvas since this values are controlled by the Stage. The width/height of the Stage is defined by the parameters you pass to the constructor and the StageScalingMode.

The example where you showed that the canvas has a size of 600x300 is probably because the html/stylesheet gives the canvas a size of 600x300 and the pixels are adjusted by the Stage. The 720x490 resoultion is the logical resolution of the Stage, you can place your display objects within this grid - regardless of the real size of the canvas.

The tabindex is set in the Stage constructor to enable keyboard events. If the canvas element has no tabindex, keyboard events won't work - many users of the library sent questions and bug reports why keyboard events don't work. Therefore the Stage adds the tabindex automatically. If you don't want it, you can remove it after the Stage constructor was executed on your own.

Previously we used tabindex=0 but it turned out that this does not work in IE. And this is the correct behaviour because the W3C standard says that tabindex starts at 1.

[bp74]

Btw. you can control the HiDpi pixelRatios of the Stage with this property:

// disables HiDPI
StageXL.stageOptions.maxPixelRatio = 1.0; 

// limits the pixelRatio to 2.0 on devies with pixelRatio > 2.0 for better performance
StageXL.stageOptions.maxPixelRatio = 2.0; 

[meibegger]

Hi,

thanks for your very in depth answer!!

I have yet to think about this stage-dimensions thing, but concerning the tabindex:

Please check http://www.w3.org/TR/html5/editing.html#sequential-focus-navigation-and-the-tabindex-attribute Tabindex is a global attribute (which means it can be assigned to any element) and can be set to

• -1 : element not focusable
• 0 : element in the default focus-order

• 0 : element in an explicit focus order

The default value is 0 for elements that are focusable (like a, button, etc.) and −1 for elements that are not focusable.

The focus order is the following:

• focus any elements with tabindex > 0 in the order of their tabindex-value and their tree-order
• then focus any elements with tabindex=0 or (tabindex!=-1 and tabable by default)

So what happens if the canvas has tabindex=1 is, that it will most likely be one of the first elements receiving focus.

• if the page has no explicit tab-order, it will be the first element getting the focus
• if the page has an explicit tab-order, it will be focused directly before or after any other elements having tabindex=1 (which could, for instance, be in the middle of a menu-navigation)

I am aware, that i can change the tabindex after initialization, but this is not really nice. Why not let the developer set the tabindex on the canvas him/herself as needed?

I noticed, that the tabindex is set as soon as i create a new stage for the canvas. If you need to set the tabindex by default, why not only set it, if an interaction is added (like a button or click event)?

And if i set a tabindex of my own, it is overwritten ... it would help, if a specified tabindex is left intact.

Concerning IE - i did a little bit of testing:

• tabindex=0 seems to work in IE10 and 11 - 9 isn't supported anymore anyway ...
• if, for some reason tabindex=0 does not work, you could try setting contenteditable="true"
• if the tabindex/contenteditable is set and the canvas is not completely visible, any click on the canvas will cause the page to scroll to make the top of the canvas visible (IE :/ - just a side note)

So maybe do something like this ...

if interactionAdded and !tabindexSet
  setTabindex(0)

---

(Sorry if i'm getting on your nerves! It is also not very important for me right now - i just noticed it ...)

[meibegger]

Ah forgot

In my IE10 (emulation) this

<canvas id="stage" width="400" height="300" style="width:100%;height:auto;background:#FFF;outline:auto;"></canvas>

stage = new Stage(canvas, width: 720, height: 800);

results in

<canvas id="stage" width="832" tabindex="1" style="width:100%;height:auto;background:#FFF;outline:auto;"></canvas>

... no height - which renders the element with 150px height ...

IE11 works as expected ...

[bp74]

Thanks for the detail information about the tabindex. I think i have to take a closer look at this. I will probably add a new field to the StageOptions to make the behavior configurable. Currently i'm pretty busy with the graphics implementation in WebGL, but i will put the tabindex on my list of ToDos :)

Any don't worry about your questions or suggestions, feedback is always welcome!

[meibegger]

New option sounds great! : ) I'm also starting to dig into WebGL currently (afraid, this Dart "overhead" is to much for my current rather small project ... : ( )