Websites/browserbench.org/MotionMark/tests/simple/resources/simple-canvas-paths.js

(function() {

// === PAINT OBJECTS ===

CanvasLineSegment = Utilities.createClass(
    function(stage) {
        var radius = Stage.randomInt(10, 100);
        var center = Stage.randomPosition(stage.size);
        var delta = Point.pointOnCircle(Stage.randomAngle(), radius/2);

        this._point1 = center.add(delta);
        this._point2 = center.subtract(delta);
        this._color = Stage.randomColor();
        this._lineWidth = Stage.randomInt(1, 100);
    }, {

    draw: function(context) {
        context.strokeStyle = this._color;
        context.lineWidth = this._lineWidth;
        context.beginPath();
        context.moveTo(this._point1.x, this._point1.y);
        context.lineTo(this._point2.x, this._point2.y);
        context.stroke();
    }
});

CanvasLinePoint = Utilities.createClass(
    function(stage, coordinateMaximumFactor) {
        var pointMaximum = new Point(Math.min(stage.size.x, coordinateMaximumFactor * stage.size.x), Math.min(stage.size.y, coordinateMaximumFactor * stage.size.y));
        this._point = Stage.randomPosition(pointMaximum).add(new Point((stage.size.x - pointMaximum.x) / 2, (stage.size.y - pointMaximum.y) / 2));
    }, {

    draw: function(context) {
        context.lineTo(this._point.x, this._point.y);
    }
})

CanvasQuadraticSegment = Utilities.createClass(
    function(stage) {
        var maxSize = Stage.randomInt(20, 200);
        var toCenter = Stage.randomPosition(stage.size).subtract(new Point(maxSize/2, maxSize/2));

        this._point1 = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
        this._point2 = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
        this._point3 = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
        this._color = Stage.randomColor();
        this._lineWidth = Stage.randomInt(1, 50);
    }, {

    draw: function(context) {
        context.strokeStyle = this._color;
        context.lineWidth = this._lineWidth;
        context.beginPath();
        context.moveTo(this._point1.x, this._point1.y);
        context.quadraticCurveTo(this._point2.x, this._point2.y, this._point3.x, this._point3.y);
        context.stroke();
    }
});

CanvasQuadraticPoint = Utilities.createClass(
    function(stage, coordinateMaximumFactor) {
        var pointMaximum = Stage.randomPosition(new Point(Math.min(stage.size.x, coordinateMaximumFactor * stage.size.x), Math.min(stage.size.y, coordinateMaximumFactor * stage.size.y)));
        this._point1 = Stage.randomPosition(pointMaximum).add(new Point((stage.size.x - pointMaximum.x) / 2, (stage.size.y - pointMaximum.y) / 2));
        this._point2 = Stage.randomPosition(pointMaximum).add(new Point((stage.size.x - pointMaximum.x) / 2, (stage.size.y - pointMaximum.y) / 2));
    }, {

    draw: function(context) {
        context.quadraticCurveTo(this._point1.x, this._point1.y, this._point2.x, this._point2.y);
    }
});

CanvasBezierSegment = Utilities.createClass(
    function(stage) {
        var maxSize = Stage.randomInt(20, 200);
        var toCenter = Stage.randomPosition(stage.size).subtract(new Point(maxSize/2, maxSize/2));

        this._point1 = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
        this._point2 = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
        this._point3 = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
        this._point4 = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
        this._color = Stage.randomColor();
        this._lineWidth = Stage.randomInt(1, 50);
    }, {

    draw: function(context) {
        context.strokeStyle = this._color;
        context.lineWidth = this._lineWidth;
        context.beginPath();
        context.moveTo(this._point1.x, this._point1.y);
        context.bezierCurveTo(this._point2.x, this._point2.y, this._point3.x, this._point3.y, this._point4.x, this._point4.y);
        context.stroke();
    }
});

CanvasBezierPoint = Utilities.createClass(
    function(stage, coordinateMaximumFactor) {
        var pointMaximum = Stage.randomPosition(new Point(Math.min(stage.size.x, coordinateMaximumFactor * stage.size.x), Math.min(stage.size.y, coordinateMaximumFactor * stage.size.y)));
        this._point1 = Stage.randomPosition(pointMaximum).add(new Point((stage.size.x - pointMaximum.x) / 2, (stage.size.y - pointMaximum.y) / 2));
        this._point2 = Stage.randomPosition(pointMaximum).add(new Point((stage.size.x - pointMaximum.x) / 2, (stage.size.y - pointMaximum.y) / 2));
        this._point3 = Stage.randomPosition(pointMaximum).add(new Point((stage.size.x - pointMaximum.x) / 2, (stage.size.y - pointMaximum.y) / 2));
    }, {

    draw: function(context) {
        context.bezierCurveTo(this._point1.x, this._point1.y, this._point2.x, this._point2.y, this._point3.x, this._point3.y);
    }
});

CanvasArcToSegment = Utilities.createClass(
    function(stage) {
        var maxSize = Stage.randomInt(20, 200);
        var toCenter = Stage.randomPosition(stage.size).subtract(new Point(maxSize/2, maxSize/2));

        this._point1 = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
        this._point2 = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
        this._point3 = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
        this._radius = Stage.randomInt(20, 200);
        this._color = Stage.randomColor();
        this._lineWidth = Stage.randomInt(1, 50);
    }, {

    draw: function(context) {
        context.strokeStyle = this._color;
        context.lineWidth = this._lineWidth;
        context.beginPath();
        context.moveTo(this._point1.x, this._point1.y);
        context.arcTo(this._point2.x, this._point2.y, this._point3.x, this._point3.y, this._radius);
        context.stroke();
    }
});

CanvasArcToSegmentFill = Utilities.createClass(
    function(stage) {
        CanvasArcToSegment.call(this, stage);
    }, {

    draw: function(context) {
        context.fillStyle = this._color;
        context.beginPath();
        context.moveTo(this._point1.x, this._point1.y);
        context.arcTo(this._point2.x, this._point2.y, this._point3.x, this._point3.y, this._radius);
        context.fill();
    }
});

CanvasArcSegment = Utilities.createClass(
    function(stage) {
        var maxSize = Stage.randomInt(20, 200);
        var toCenter = Stage.randomPosition(stage.size).subtract(new Point(maxSize/2, maxSize/2));

        this._point = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
        this._radius = Stage.randomInt(20, 200);
        this._startAngle = Stage.randomAngle();
        this._endAngle = Stage.randomAngle();
        this._counterclockwise = Stage.randomBool();
        this._color = Stage.randomColor();
        this._lineWidth = Stage.randomInt(1, 50);
    }, {

    draw: function(context) {
        context.strokeStyle = this._color;
        context.lineWidth = this._lineWidth;
        context.beginPath();
        context.arc(this._point.x, this._point.y, this._radius, this._startAngle, this._endAngle, this._counterclockwise);
        context.stroke();
    }
});

CanvasArcSegmentFill = Utilities.createClass(
    function(stage) {
        CanvasArcSegment.call(this, stage);
    }, {

    draw: function(context) {
        context.fillStyle = this._color;
        context.beginPath();
        context.arc(this._point.x, this._point.y, this._radius, this._startAngle, this._endAngle, this._counterclockwise);
        context.fill();
    }
});

CanvasRect = Utilities.createClass(
    function(stage) {
        this._width = Stage.randomInt(20, 200);
        this._height = Stage.randomInt(20, 200);
        this._point = Stage.randomPosition(stage.size).subtract(new Point(this._width/2, this._height/2));
        this._color = Stage.randomColor();
        this._lineWidth = Stage.randomInt(1, 20);
    }, {

    draw: function(context) {
        context.strokeStyle = this._color;
        context.lineWidth = this._lineWidth;
        context.beginPath();
        context.rect(this._point.x, this._point.y, this._width, this._height);
        context.stroke();
    }
});

CanvasRectFill = Utilities.createClass(
    function(stage) {
        CanvasRect.call(this, stage);
    }, {

    draw: function(context) {
        context.fillStyle = this._color;
        context.beginPath();
        context.rect(this._point.x, this._point.y, this._width, this._height);
        context.fill();
    }
});

CanvasEllipse = Utilities.createClass(
    function(stage) {
        this._radius = new Point(Stage.randomInt(20, 200), Stage.randomInt(20, 200));
        var toCenter = Stage.randomPosition(stage.size).subtract(this._radius.multiply(.5));

        this._center = Stage.randomPosition(this._radius).add(toCenter);
        this._rotation = Stage.randomAngle();
        this._startAngle = Stage.randomAngle();
        this._endAngle = Stage.randomAngle();
        this._anticlockwise = Stage.randomBool();
        this._color = Stage.randomColor();
        this._lineWidth = Stage.randomInt(1, 20);
    }, {

    draw: function(context) {
        context.strokeStyle = this._color;
        context.lineWidth = this._lineWidth;
        context.beginPath();
        context.ellipse(this._center.x, this._center.y, this._radius.width, this._radius.height, this._rotation, this._startAngle, this._endAngle, this._anticlockwise);
        context.stroke();
    }
});

CanvasEllipseFill = Utilities.createClass(
    function(stage) {
        CanvasEllipse.call(this, stage);
    }, {

    draw: function(context) {
        context.fillStyle = this._color;
        context.beginPath();
        context.ellipse(this._center.x, this._center.y, this._radius.width, this._radius.height, this._rotation, this._startAngle, this._endAngle, this._anticlockwise);
        context.fill();
    }
});

CanvasStroke = Utilities.createClass(
    function (stage) {
        this._object = new (Stage.randomElementInArray(this.objectTypes))(stage);
    }, {

    objectTypes: [
        CanvasQuadraticSegment,
        CanvasBezierSegment,
        CanvasArcToSegment,
        CanvasArcSegment,
        CanvasRect,
        CanvasEllipse
    ],

    draw: function(context) {
        this._object.draw(context);
    }
});

CanvasFill = Utilities.createClass(
    function (stage) {
        this._object = new (Stage.randomElementInArray(this.objectTypes))(stage);
    }, {

    objectTypes: [
        CanvasArcToSegmentFill,
        CanvasArcSegmentFill,
        CanvasRectFill,
        CanvasEllipseFill
    ],

    draw: function(context) {
        this._object.draw(context);
    }
});

// === STAGES ===

SimpleCanvasPathStrokeStage = Utilities.createSubclass(SimpleCanvasStage,
    function(canvasObject) {
        SimpleCanvasStage.call(this, canvasObject);
    }, {

    animate: function()
    {
        var context = this.context;
        context.clearRect(0, 0, this.size.x, this.size.y);
        context.lineWidth = Stage.randomInt(1, 20);
        context.strokeStyle = Stage.rotatingColor();
        context.beginPath();
        context.moveTo(this.size.x / 2, this.size.y / 2);
        for (var i = 0, length = this.offsetIndex; i < length; ++i)
            this.objects[i].draw(context);
        context.stroke();
    }
});

SimpleCanvasPathFillStage = Utilities.createSubclass(SimpleCanvasStage,
    function(canvasObject) {
        SimpleCanvasStage.call(this, canvasObject);
    }, {

    animate: function()
    {
        var context = this.context;
        context.clearRect(0, 0, this.size.x, this.size.y);
        context.fillStyle = Stage.rotatingColor();
        context.beginPath();
        context.moveTo(this.size.x / 2, this.size.y / 2);
        for (var i = 0, length = this.offsetIndex; i < length; ++i)
            this.objects[i].draw(context);
        context.fill();
    }
});

CanvasLineSegmentStage = Utilities.createSubclass(SimpleCanvasStage,
    function()
    {
        SimpleCanvasStage.call(this, CanvasLineSegment);
    }, {

    initialize: function(benchmark, options)
    {
        SimpleCanvasStage.prototype.initialize.call(this, benchmark, options);
        this.context.lineCap = options["lineCap"] || "butt";
    }
});

CanvasLinePathStage = Utilities.createSubclass(SimpleCanvasPathStrokeStage,
    function()
    {
        SimpleCanvasPathStrokeStage.call(this, CanvasLinePoint);
    }, {

    initialize: function(benchmark, options)
    {
        SimpleCanvasPathStrokeStage.prototype.initialize.call(this, benchmark, options);
        this.context.lineJoin = options["lineJoin"] || "bevel";
    }
});

CanvasLineDashStage = Utilities.createSubclass(SimpleCanvasStage,
    function()
    {
        SimpleCanvasStage.call(this, CanvasLinePoint);
        this._step = 0;
    }, {

    initialize: function(benchmark, options)
    {
        SimpleCanvasStage.prototype.initialize.call(this, benchmark, options);
        this.context.setLineDash([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
        this.context.lineWidth = 1;
        this.context.strokeStyle = "#000";
    },

    animate: function()
    {
        var context = this.context;
        context.clearRect(0, 0, this.size.x, this.size.y);
        context.lineDashOffset = this._step++;
        context.beginPath();
        context.moveTo(this.size.x / 2, this.size.y / 2);
        for (var i = 0, length = this.offsetIndex; i < length; ++i)
            this.objects[i].draw(context);
        context.stroke();
    }
});

// === BENCHMARK ===

CanvasPathBenchmark = Utilities.createSubclass(Benchmark,
    function(options)
    {
        var stage;
        switch (options["pathType"]) {
        case "line":
            stage = new CanvasLineSegmentStage();
            break;
        case "linePath": {
            if ("lineJoin" in options)
                stage = new CanvasLinePathStage();
            if ("lineDash" in options)
                stage = new CanvasLineDashStage();
            break;
        }
        case "quadratic":
            stage = new SimpleCanvasStage(CanvasQuadraticSegment);
            break;
        case "quadraticPath":
            stage = new SimpleCanvasPathStrokeStage(CanvasQuadraticPoint);
            break;
        case "bezier":
            stage = new SimpleCanvasStage(CanvasBezierSegment);
            break;
        case "bezierPath":
            stage = new SimpleCanvasPathStrokeStage(CanvasBezierPoint);
            break;
        case "arcTo":
            stage = new SimpleCanvasStage(CanvasArcToSegment);
            break;
        case "arc":
            stage = new SimpleCanvasStage(CanvasArcSegment);
            break;
        case "rect":
            stage = new SimpleCanvasStage(CanvasRect);
            break;
        case "ellipse":
            stage = new SimpleCanvasStage(CanvasEllipse);
            break;
        case "lineFill":
            stage = new SimpleCanvasPathFillStage(CanvasLinePoint);
            break;
        case "quadraticFill":
            stage = new SimpleCanvasPathFillStage(CanvasQuadraticPoint);
            break;
        case "bezierFill":
            stage = new SimpleCanvasPathFillStage(CanvasBezierPoint);
            break;
        case "arcToFill":
            stage = new SimpleCanvasStage(CanvasArcToSegmentFill);
            break;
        case "arcFill":
            stage = new SimpleCanvasStage(CanvasArcSegmentFill);
            break;
        case "rectFill":
            stage = new SimpleCanvasStage(CanvasRectFill);
            break;
        case "ellipseFill":
            stage = new SimpleCanvasStage(CanvasEllipseFill);
            break;
        case "strokes":
            stage = new SimpleCanvasStage(CanvasStroke);
            break;
        case "fills":
            stage = new SimpleCanvasStage(CanvasFill);
            break;
        }

        Benchmark.call(this, stage, options);
    }
);

window.benchmarkClass = CanvasPathBenchmark;

})();