Many apps are getting this to work successfully. Could you attach an example to show us how your a doing it?

You can check it by link or in attachment:
https://jsfiddle.net/cu6xjw61/2/

Rectangle on canvas doesnt change if you change window.devicePixelRatio (scroll mouse wheel or change browser scale) but the whole scene size (or main canvas size) changes based on browser scale.

Test it on both retina and non retina. And compare the area of the whole scene and rectangle area. On retina screen objects look twice as small.

Deleted: retina.html 792 bytes

retina.html 792 bytes View Download

Thank you for providing more feedback. Adding requester "junov@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

That is the correct behavior as per the spec.  The coordinate system of the 2d context is defined [1] such that one CSS pixel is equal to the size of one pixel in the canvas's bitmap.

To get the behavior you are looking for, you need to scale the context.
Like this: https://jsfiddle.net/cu6xjw61/3/

[1] https://html.spec.whatwg.org/multipage/canvas.html#2dcontext

Excerpt:

Using CSS pixels to describe the size of a rendering context's output bitmap does not mean that when rendered the canvas will cover an equivalent area in CSS pixels. CSS pixels are reused for ease of integration with CSS features, such as text layout.

In other words, the canvas element below's rendering context has a 200x200 output bitmap (which internally uses CSS pixels as a unit for ease of integration with CSS) and is rendered as 100x100 CSS pixels:

<canvas width=200 height=200 style=width:100px;width:100px>

Please check adobe flash spec:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/StageScaleMode.html

I need StageScaleMode.NO_SCALE:
Specifies that the size of the application be fixed, so that it remains unchanged even as the size of the player window changes. Cropping might occur if the player window is smaller than the content.

Refer to this game:
https://apps.facebook.com/knightsbrides

Elements on the stage remain the same 100% not depending on browser stage scale.

Deleted: not the one i need.JPG 157 KB

	not the one i need.JPG 157 KB View Download

Deleted: the one i need.JPG 153 KB

	the one i need.JPG 153 KB View Download

Okay, I see. So basically you want the scale of the content of the canvas to not be affected by HTML/CSS content scaling.

You can sniff any scaling done in CSS with this:
canvas.getBoundingClientRect().width / parseInt(window.getComputedStyle(canvas).width)

Unfortunately that will not take into account the full page zoom applied by the browser.  Does that matter to you? Are you trying to make your content's scale independent of the browser's global page zoom?  It seems flash's NO_SCALE mode has that behavior, but I can't image why you'd want to ignore the page zoom. That basically prevents visually impaired users (who need to magnify stuff) from using your web app.

As far as I know, there's no inter-operable way of sniffing the page zoom. I found this page that shows a bunch of hacks (it's a bit dated):
https://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers

Not sure if any of those tricks work in current versions of Chrome. It's possible that page zoom is purposely not sniffable in order to avoid leaking user preferences.

Just to be clear, can you confirm whether your objective (or one of your objectives) is to prevent the canvas contents from being affected by the browser's page zoom setting?

Yes. I confirm that we need to prevent the canvas contents from being affected by the browser's page zoom setting.

All solutions solutions dont work or easily broken by opened devtools.

We want our users not to notice any changes during switch from adobe flash to html5 client.

We use both NO_SCALE and DEFAULT (SHOW_ALL) modes. We've tried to launch our client on a few users but had some really negative feedback about SHOW_ALL scale mode.

So we need to implement NO_SCALE to give our users exact the same gaming experience.

update:
checked your solution:
"canvas.getBoundingClientRect().width / parseInt(window.getComputedStyle(canvas).width"

https://jsfiddle.net/cu6xjw61/6/
always returns 1 on both retina and non-retina in all browser scales.

we need real device scale (system scale) for making NO_SCALE mode look the same on retina and non-retina (using both device (system) scale and window.devicePixelRatio)

junov@: Could you please take a look and help in further triaging as per C#11.

@11: That solution is only for sniffing scaling that is induced by the page's style.  For example, if an hierarchical ancestor of the canvas element has a scale CSS transform.

It seems there is now API for doing what you want.

I am re-triaging this as a feature request, and assigning to the Zoom component for further triage and discussion.

Can you make it as it is in MSIE or Edge Browsers?
Something like:
https://msdn.microsoft.com/ru-ru/library/windows/desktop/ms535868(v=vs.85).aspx

* screen.systemXDPI (we always want the canvas element size to be affected by this parameter, cause user has set it on his own so he wants all elements to be larger scale)
* screen.logicalXDPI
* screen.deviceXDPI

Thanks