url: "simple/simple-canvas-paths.html?pathType=quadratic",
name: "Canvas quadratic segments"
},
+ {
+ url: "simple/simple-canvas-paths.html?pathType=quadraticPath",
+ name: "Canvas quadratic path"
+ },
{
url: "simple/simple-canvas-paths.html?pathType=bezier",
name: "Canvas bezier segments"
},
+ {
+ url: "simple/simple-canvas-paths.html?pathType=bezierPath",
+ name: "Canvas bezier path"
+ },
{
url: "simple/simple-canvas-paths.html?&pathType=arcTo",
name: "Canvas arcTo segments"
context.stroke();
};
+function CanvasQuadraticPoint(stage, coordinateMaximum) {
+ var pointMaximum = new Point(Math.min(stage.size.x, coordinateMaximum), Math.min(stage.size.y, coordinateMaximum));
+ this._point1 = stage.randomPosition(pointMaximum);
+ this._point2 = stage.randomPosition(pointMaximum);
+};
+CanvasQuadraticPoint.prototype.draw = function(context) {
+ context.quadraticCurveTo(this._point1.x, this._point1.y, this._point2.x, this._point2.y);
+};
+
function CanvasBezierSegment(stage) {
var maxSize = stage.randomInt(20, 200);
var toCenter = stage.randomPosition(stage.size).subtract(new Point(maxSize/2, maxSize/2));
context.stroke();
};
+function CanvasBezierPoint(stage, coordinateMaximum) {
+ var pointMaximum = new Point(Math.min(stage.size.x, coordinateMaximum), Math.min(stage.size.y, coordinateMaximum));
+ this._point1 = stage.randomPosition(pointMaximum);
+ this._point2 = stage.randomPosition(pointMaximum);
+ this._point3 = stage.randomPosition(pointMaximum);
+};
+CanvasBezierPoint.prototype.draw = function(context) {
+ context.bezierCurveTo(this._point1.x, this._point1.y, this._point2.x, this._point2.y, this._point3.x, this._point3.y);
+};
+
function CanvasArcToSegment(stage) {
var maxSize = stage.randomInt(20, 200);
var toCenter = stage.randomPosition(stage.size).subtract(new Point(maxSize/2, maxSize/2));
context.fill();
};
+// === STAGES ===
+
+function SimpleCanvasPathStrokeStage(element, options, canvasObject) {
+ SimpleCanvasStage.call(this, element, options, canvasObject);
+}
+SimpleCanvasPathStrokeStage.prototype = Object.create(SimpleCanvasStage.prototype);
+SimpleCanvasPathStrokeStage.prototype.constructor = SimpleCanvasPathStrokeStage;
+SimpleCanvasPathStrokeStage.prototype.animate = function() {
+ var context = this.context;
+ context.lineWidth = this.randomInt(1, 20);
+ context.strokeStyle = this.randomColor();
+ context.beginPath();
+ context.moveTo(0,0);
+ this._objects.forEach(function(object) {
+ object.draw(context);
+ });
+ context.stroke();
+}
+
// === BENCHMARK ===
function CanvasPathBenchmark(suite, test, options, recordTable, progressBar) {
switch (this._options["pathType"]) {
case "quadratic":
return new SimpleCanvasStage(element, this._options, CanvasQuadraticSegment);
+ case "quadraticPath":
+ return new SimpleCanvasPathStrokeStage(element, this._options, CanvasQuadraticPoint);
case "bezier":
return new SimpleCanvasStage(element, this._options, CanvasBezierSegment);
+ case "bezierPath":
+ return new SimpleCanvasPathStrokeStage(element, this._options, CanvasBezierPoint);
case "arcTo":
return new SimpleCanvasStage(element, this._options, CanvasArcToSegment);
case "arc":
+2015-10-12 Jon Lee <jonlee@apple.com>
+
+ Add canvas path tests
+ https://bugs.webkit.org/show_bug.cgi?id=150067
+ rdar://problem/23081463
+
+ Reviewed by Dean Jackson.
+
+ * Animometer/runner/resources/tests.js: Add a quadratic and bezier path test.
+
+ * Animometer/tests/simple/resources/simple-canvas.js:
+ (SimpleCanvasStage.prototype.tune): This kind of test joins all of the segments
+ into one long path, and tries to render that one path. Random points make it
+ difficult to tell what is going on, so add a parameter to the constructor to
+ confine the area where the random coordinates can land. The more complicated the
+ case is, the larger an area the path will cover. Add an artificial minimum so
+ that the first 200 points aren't confined to a space that is too small.
+
+ * Animometer/tests/simple/resources/simple-canvas-paths.js:
+ (SimpleCanvasPathStrokeStage): Add a new kind of stage that inherits from
+ SimpleCanvasStage. Each time the frame animates a random line width and stroke
+ color are chosen. The path setup is done outside of each paint object.
+ (CanvasQuadraticPoint): This point just calls quadraticCurveTo.
+ (CanvasPathBenchmark.prototype.createStage): Add the tests.
+
2015-10-12 Jon Lee <jonlee@apple.com>
Add basic canvas tests