I am currently working on rendering mathML into an HTML5 canvas. One suggestion I received was to embed the mathML as an SVG foreign object, render it into an image, and then display the image within the canvas.
However, this method works fine in Firefox but encounters issues on the iPad. You can view some examples here:
Rendering mathML as SVG. Successful on Firefox and iPad.
Rendering mathML in the canvas. Works on FF but fails on iPad.
A debug version of canvas rendering. Drawing is delayed until mouseDown for testing with firebug lite on iPad.
The code snippet used in the canvas.html example is provided below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Canvas Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>
<script type="text/javascript">
window.addEventListener('load', function () {
var drawMath = function() {
// Get the canvas element.
var elem = document.getElementById('myCanvas');
var ctx = elem.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
"<foreignObject width='100%' height='100%'>" +
"<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:20px'>" +
"...(omitted for brevity)..."
"</div>" +
"</foreignObject>" +
"</svg>";
var DOMURL = self.URL || self.webkitURL || self;
mathimg = new Image();
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
mathimg.src = "";
var drawImg = function() {
ctx.drawImage(mathimg, 0, 0);
DOMURL.revokeObjectURL(url);
};
mathimg.addEventListener("load", function(e) {
drawImg();
}, false);
mathimg.src = url;
};
drawMath();
});
</script>
</head>
<body>
<canvas id="myCanvas">
Render some math here
</canvas>
</body>
</html>
Running this code in Firefox invokes the image load callback successfully. However, on iPad, the load event does not trigger, resulting in no rendering.
I have attempted various solutions including setting the image.src explicitly before defining the callback function. Additionally, replacing the load callback with a timer delay did not resolve the issue either. This roadblock is a significant problem since my target platform is the iPad. Any assistance would be greatly appreciated.