Jump to content

createRadialGradient with transparency broken in chrome on Android


Recommended Posts

I have a new game in which I'm using context.createRadialGradient to generate a vignette effect, ie darkened edges surrounding a transparent area in the middle. I'm then using this canvas as a texture source for a sprite in pixi.js v3. This has been working very well on iOS and on desktop. I've just come to test the game in chrome on an Android phone and discovered that it is not really working there at all. Under webgl I see no gradient and the screen just strobes with plain black. Under canvas2D there is just no vignette rendered at all. I'm getting the feeling that I might have to use prebaked vignettes after all which is a shame because they won't fit into my existing texture atlas. Has anybody else encountered this problem of createRadialGradient not working in chrome on android? Maybe I am missing something obvious?

Link to comment
Share on other sites

Actually the strobing is a separate issue and only seems to happen on my phone. I tested on another Android device and the strobing was gone. But the radial gradient issue remains - no gradient was rendered. I'm creating vignettes with radial gradients in two slightly different ways in different places and neither of them work. In the simplest case I'm filling a rect with a radial gradient that goes from black at the edges to fully transparent at the middle. Works everywhere else but not in mobile chrome on Android it seems.


[Edit] - whoops, should have put this in the Coding and Game Design forum!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...