Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iPhone/iPad HTML5 Canvas fillText problem

I'm having strange issues with text on a canvas when using an iPhone or iPad. Either the text gets drawn properly (rarely), or it gets drawn upside down, or it doens't get drawn at all. When the text does manage to get drawn, it is wiped when the iPhone/Pad is rotated.

I have the following code. It seems that I can only get the text to stay on the page at all if I use a setTimeout. It seems to be drawn over if I call fillText as soon as the document is loaded.

Anyone else experiencing this sort of problem?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //draw_b();
        setTimeout('draw_b()', 500); ;
    });

    function draw_b() {
        var b_canvas = document.getElementById("cv");
        var context = b_canvas.getContext("2d");
        context.fillText("Belated hello world", 50, 50);
    }
</script>
</head>
<body>
<canvas id="cv" width="300" height="225"></canvas>

</body>
</html>
like image 437
Mr. Flibble Avatar asked Nov 06 '22 12:11

Mr. Flibble


1 Answers

I have the same problem , the earlier version(3.2) doesn't support HTML5 Canvas filltext, You can use alternative API such stroketext to fix this issue: http://www.netzgesta.de/dev/text/#canvas_api

like image 50
Zarta Avatar answered Nov 11 '22 03:11

Zarta