Chrome for android issue regarding html5 canvas and text / filltext

Question

I am currently creating a game in HTML5 using Canvas. Right now, it works pretty well with all the internet browsers except Google Chrome for Android which refuses to display my "filltext" commands...

I noticed that the game worked when I disabled the 2D acceleration of Chrome Android through chrome://flags/... but i obviously cannot ask users to disable their 2D acceleration feature of Chrome prior to playing. Does anybody have a solution to display my filltext under google chrome for android?

You will find below the code: basically, i can see the text in all the browsers except chrome for android... it draws the background and not the text.

//Get the canvas var canvas2 = document.getElementById("layer2"); var ctx2 = canvas2.getContext("2d");

//Rendering function (draw background and draw image) var render = function () { ctx2.drawImage(background, 0, 0); ctx2.fillText("Lolo", 400, 400); }

// main loop var main = function () { var now = Date.now(); var delta = now - then; update(delta / 1000); render(); then = now; }; var then = Date.now(); setInterval(main, 1);

Thank you!

Laurent

Answer 1

This appears to be a bug with the software renderer, you will need to make your canvas at least 256 pixels in size to force it in to the GPU path. Paul Lewis face a similar problem and blogged about it

If you can provide a reduced demo, I will file the Bug against Chrome (or you can do it at http://m.crbug.com/new)