Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

undefined TypeError only on iPhone — JavaScript, HTML5 canvas_context.measureText

typeerror iphone javascript measuretext canvas undefined html5

  • Please log in to reply
1 reply to this topic

#1 SexyBachelor

SexyBachelor

    CC Lurker

  • Just Joined
  • Pip
  • 2 posts
  • Programming Language:C, Java, C++, C#
  • Learning:PHP, Python, JavaScript, Assembly, Others

Posted 10 November 2012 - 11:30 AM

Hi there. I'm working on a website that uses HTML's canvas to draw text onto the screen.

There is an error on iPhone reading
"TypeError: 'undefined' is not an object"

This error propagates from the call:
(canvas 2d context).measureText("text");

The website works perfectly well on many operating systems and browsers that I have tested. The problem only persists on iPhone.
Here is a link to full details: http://stackoverflow...3301056/1433127

Has anyone else run into this problem? measureText is such an essential function to be glitched up like that.. I'm looking for a workaround if anyone has one.
  • 0

#2 SexyBachelor

SexyBachelor

    CC Lurker

  • Just Joined
  • Pip
  • 2 posts
  • Programming Language:C, Java, C++, C#
  • Learning:PHP, Python, JavaScript, Assembly, Others

Posted 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.
  • 0





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