2

Is there a setting for the canvas context that will prevent its renderer from using hardware acceleration? I want to render without it, but don't want to ask the user to disable it from their chrome browser since that is counter-intuitive and doesn't provide a seamless workflow experience.

user3591153
  • 409
  • 4
  • 14
  • Why do you want to do it actually? Your question sounds like an X-Y problem. I know, HW acceleration can introduce bugs and imprecisions, but there might be a way to workaround the actual issue you are facing. Otherwise, since you've got access to the raw pixels bitmap, you can always implement yourself all the features of the 2DContext API, that would always be software rendered. – Kaiido Apr 04 '19 at 01:31
  • Basically what I want to do is render low resolution text without anti-aliasing. The only way to do this is to disable the hardware acceleration (it causes all the fonts to have aliasing). I'll probably end up wrapping my work into an nw.js app so that it can be run with the --disable-gpu as one of the chromium-args. I just was hoping I didn't have to do that, since it just seems like extra work for something that should be simple. – user3591153 Apr 04 '19 at 02:02
  • Uh? Even with software rendering, if your font is not a bitmap, you'll have antialising. Or do you want subpixel rendering (like in HTML)? That's doable. But anyway, try to post that question instead/too. And don't forget to include an [MCVE] there (with the particular font you wish to use etc). – Kaiido Apr 04 '19 at 02:06
  • hm that's weird. I thought it was the hardware acceleration, but maybe its related to the Appearance settings of windows 10- setting "smooth edges of screen fonts" changed whether the fonts render with anti-aliasing. That's strange because I could have sworn that I was seeing it change when I was disabling/enabling the hardware accelleration in chrome. Because I had the smoothing disabled originally and stuff in chrome was still smoothed even when it was restarted, and only after changing the gpu setting did it change.. but now it changed when I switch the smoothing option in windows.. weird. – user3591153 Apr 04 '19 at 02:55
  • I think closing chrome doesn't reset something, because when I open chrome it reloads all my tabs. I think there was something being forced to reload when I set the gpu setting in chrome args, so I was led to believe it was a chrome issue. I guess it's just a windows 10 situation I have to deal with – user3591153 Apr 04 '19 at 03:01
  • Another completely different reason why you might want to prevent hardware acceleration being used for Canvas2DContext is that some combinations of browser + graphics drivers have bugs which unpredictably cause incorrect rendering. Turning off hardware acceleration may be desirable as a workaround for upstream bugs. – Richard Barrell May 17 '23 at 12:13

2 Answers2

1

Short Answer:

No, but it is at least being considered by those developing Chromium. MDN: CanvasContext2D In the page you'll find an internal method called demote.

Long Answer:

There's nothing standaradized currently, and the only method available from a 2D context to perform this (demote) is Chrome-Context (chromium) only.

Per MDN:

CanvasRenderingContext2D.demote() This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.

It's apparent they've considered it, but I wouldn't expect it to be adopted any time soon as it is probably not a prioritized topic of discussion/pain-point. Furthermore, unfortunately since it's a Chrome specific implementation and we're dealing with altering the way the Browser itself behaves, there isn't a way to patch this functionality into other Browsers through polyfilling or shimming.

Conclusion:

The technical answer is maybe. It depends on the Browser you're targeting supporting a non-standardized feature that won't be standardized soon(or possibly ever), and your willingness to not support any other Browser. That being said, the pragmatic answer is no

Hope this helps!

zfrisch
  • 8,474
  • 1
  • 22
  • 34
  • I fear you misunderstood this page. "chrome-context" means extensions here (chrome://), not chromium like browsers ;-) You should have access to it from firefox extensions too and others following the standardization of chrome-APIs (extensions), but not from web content, not even in chromium. – Kaiido Apr 03 '19 at 23:55
  • @Kaiido You're right, I did! Thanks for pointing it out. I am currently mobile so I'm not really able to edit it at the moment. If you'd like to edit it, I'd be happy to accept the changes, otherwise I will when I get a chance :D – zfrisch Apr 03 '19 at 23:59
  • Myself on mobile too currently. – Kaiido Apr 04 '19 at 00:36
  • 1
    What happened to denote method? Is it gone or replaced? – jeffbRTC Feb 06 '21 at 12:58
1

There is now (since 2022) a willReadFrequently 2D context attribute which will tell the browser that you plan to do a lot of readbacks on this context and thus that it should avoid hardware acceleration for it (since moving the canvas buffer from-to the GPU-CPU is very slow).

Currently Chrome and Firefox do support this attribute, and they will both indeed use software rendering when set.

const deaccelerated = canvas.getContext("2d", { willReadFrequently: true });
Kaiido
  • 123,334
  • 13
  • 219
  • 285