Drawview was specified as a subset of the WHATWG drawing API, but the implementation of arc is not compatible with it. This means that WHATWG libraries cannot be used with OpenLaszlo. (I ran across this while trying to use the JavaScript graph layout library here <
http://ajaxian.com/archives/new-javascriptcanvas-graph-library> with OpenLaszlo. It can be used with an adapter layer, except that it would require a reimplementation of arc to match WHATWG.)
The WHATWG specification says <
http://www.whatwg.org/specs/web-apps/current-work/#paths>:
The arc(x, y, radius, startAngle, endAngle, anticlockwise) method adds an arc to the current path. The arc is given by the circle that has its origin at (x, y) and that has radius radius. The points at startAngle and endAngle along the circle, measured in radians clockwise from the positive x-axis, are the start and end points. The arc is the path along the circumference of the circle from the start point to the end point going anti-clockwise if the anticlockwise argument is true, and clockwise otherwise.
OpenLaszlo deviates in two ways:
- In WHATWG, the angle is measured in radians. In OpenLaszlo, it is measured in degrees.
- In WHATWG, the first two parameters specify the center of the circle. In OpenLaszlo, they specify the start position. (This is correct for the WHATWG arcTo() function, but not for arc().)
The following program should circumscribe a circle within the square. Instead, it draws a smudge inside the rectangle. If 2*Math.PI is replaced by 360, it draws a semicircle (since the left half of the circle is off the screen).
<canvas>
<drawview width="100" height="100">
<method event="oninit">
beginPath();
rect(0, 0, 100, 100);
arc(50, 50, 50, 0, 2*Math.PI, true);
stroke();
</method>
</drawview>
</canvas>
Compare this to the WHATWG program:
<html>
<body onLoad="start()">
<canvas id="canvas" width="100" height="100"></canvas>
<script type="text/javascript">
function start() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.beginPath();
ctx.rect(0, 0, 100, 100);
ctx.arc(50, 50, 50, 0, 2*Math.PI, true);
ctx.stroke();
}
</script>
</body>
</html>
Bug
Resolved
P1
arc does not match WHATWG specification
LzDrawView.prototype.arc = function(x, y, radius, startAngle, endAngle, clockwise) {
// increment (x,y) while startAngle is still in radians
x += radius * Math.cos(startAngle);
y += radius * Math.sin(startAngle);
// convert angles to degrees, for Flash
startAngle *= 180/Math.PI;
endAngle *= 180/Math.PI;
var arc = clockwise == true ? startAngle - endAngle : endAngle - startAngle;
this.moveTo(x, y);
this._drawArc(x, y, radius, arc, startAngle);
}
To update the test case in test/drawing/drawing.lzx:
this.arc(100, 100, 50, 0, 90) =>
this.arc(50, 100, 50, 0, Math.PI/2)
The docs should be updated to match the WHATWG description.
There don't appear to be any uses of arc(), including in the incubator (roundrects use drawview.rect, which uses a private method) or pie charts (they do their own circle computation, which is one reason they've got so much code).