Tested on HTC One X and Galaxy S3 both running 4.0.4.
The following sample demonstrates the problem.
The line is centered on all plaforms (including Android 2.x) but left-aligned on Android 4. See screenshots.
<!DOCTYPE html>
<html>
<head>
<title>Text Transform</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../../../dojo/dojo.js"
data-dojo-config="async:true, isDebug:true">
</script>
<script type="text/javascript">
require(["dojo/ready", "dojo/dom", "dojox/gfx"], function(ready, dom, gfx){
ready(function(){
var container = dom.byId("gfx_holder");
surface = gfx.createSurface(container, 600, 600);
surface.createLine({x1: 300, y1:0, x2:300, y2:600}).setStroke("red");
surface.createText({
x: 0,
y: 0,
text: "-----><-----",
align: "middle"
}).setFill("black").setTransform({dx:300, dy:300});
});
});
</script>
</head>
<body>
<div id="gfx_holder" style="width: 600px; height: 600px; border: solid;">
</div>
</body>
</html>
It's a bug in the android default browser. I have filled a BR here: https://code.google.com/p/android/issues/detail?id=38202
The problem is due to the text-rendering="optimizeLegibility" property that is set by gfx. Removing this hint gives the correct result. A patch specific to Android 4 should therefore be possible.