Jump to content


Check out our Community Blogs

SexyBachelor

Member Since 10 Nov 2012
Offline Last Active Nov 10 2012 10:09 PM
-----

Posts I've Made

In Topic: undefined TypeError only on iPhone — JavaScript, HTML5 canvas_context.measure...

10 November 2012 - 11:50 AM

I have confirmed that this short code produces the error:

<html>
<head>
	 <title>iPhone test page --- is measureText the issue?</title>
	 <script type="text/javascript" src="font/canvas.text.js"></script>
</head>
<body height="400px">
		 <canvas id = "drawArea"></canvas>
		 <script type="text/javascript">
			 var can = document.getElementById("drawArea");
			 var c2d = can.getContext("2d");
			 c2d.fillStyle = "red";
			 c2d.globalAlpha = 1;
			 c2d.fillRect(0,0, can.width, can.height);
			 c2d.fillStyle = "black";
			 c2d.font = "12px Arial";
			 var text = "Hello, world!";
			 var width = c2d.measureText(text).width;
			 c2d.fillText(text, can.width/2 - width/2, can.height/2- 6);
		 </script>
</body>
</html>

This code works well on mac safari, but not my friend's iPhone safari (unhacked etc...) I'm working on testing it on more iPhones at the moment

Edit: tested on two iPhones now. The newer iPhone (5) draws the red box over the entire canvas but does not draw the text. The older iPhone (4s) draws neither. I have also modified the font to use the standard font "Arial" as seen in the above code.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download