Graphic elements not assigned parent elements on Safari iPad when using Google Closure

Question

I'm using Google closure to create a simple interactive graphic in HTML/JS to be viewed on iPad Safari.

The code sample below shows expected behavior on Safari Mac and all other major browsers (a circle appears that when clicked generates a console message), but not Safari iPad. No event handler is registered with the circle. Instead, an error is thrown.

goog.require('goog.graphics'); 
goog.require('goog.events.EventType'); 
goog.require('goog.graphics.Stroke'); 
goog.require('goog.graphics.SolidFill'); 

var showCircle = function() { 
  var graphics = goog.graphics.createGraphics(400, 400); 
  var stroke = new goog.graphics.Stroke(1, 'black'); 
  var fill = new goog.graphics.SolidFill('#00ff00', 0.5); 
  var circle = graphics.drawEllipse(100, 100, 30, 30, stroke, fill); 
  var element = goog.dom.getElement('demo'); 
  graphics.render(element); 
  console.info(circle.getElement()); 
  goog.events.listen(circle, goog.events.EventType.MOUSEDOWN, function(e) { 
    console.info('mousedown'); 
  });
};

The error reads (thrown from base.js):

JavaScript Error on Line 804 ... TypeError: Result of expression 'obj' [null] is not an object.

I think I've traced the problem to the lack of a DOM element for circle, and the fact that registering a listener on circle attempts to register a listener on circle.getElement(). When queried, circle.getElement() returns null, explaining the error. Note that the console output message prints null on iPad Safari, but:

<ellipse cx=​"100" cy=​ "100" rx=​"30" ry=​"30" stroke=​"black" stroke-width=​"1" fill=​ "#00ff00" fill-opacity=​"0.5">​

on Mac Safari.

On both Mac and iPad Safari, the circle is drawn the same. The only difference is the error. Using 'touchstart' as the event name instead of goog.events.EventType.MOUSEDOWN makes no difference.

I want to register an event listener with circle without an error being generated on iPad. How can I do this?

Answer 1

I think I found the answer. For those who are interested...

Using Firebug Light I noticed that the drawing element that was created was <canvas>. Seems totally obvious now, but goog.graphics.createGraphics creates a canvas tag by default for iPad. This explains why circle.getElement() returns null.

We need SVG, which is supported by iPad. Closure can be tricked into providing SVG graphics with something like:

  var oldMobileSetting = goog.userAgent.MOBILE;
  goog.userAgent.MOBILE = false;
  var graphics = goog.graphics.createGraphics(400, 400);
  goog.userAgent.MOBILE = oldMobileSetting;

Doing this, the demo works as expected. Alternatively, we could directly create SVG graphics if iPad environment is known by directly instantiating:

var graphics = new goog.graphics.SvgGraphics(400, 400);

Answer 2

It would probably be better to submit a patch to the goog.graphics.createGraphics method in http://closure-library.googlecode.com/svn/docs/closure_goog_graphics_graphics.js.source.html