tools/perf-canvaskit-puppeteer/canvas_perf.js

const tests = [];

function randomColor(CanvasKit) {
    return CanvasKit.Color4f(Math.random(), Math.random(), Math.random(), Math.random());
}

function starPath(CanvasKit, X=128, Y=128, R=116) {
    const p = new CanvasKit.SkPath();
    p.moveTo(X + R, Y);
    for (let i = 1; i < 8; i++) {
      let a = 2.6927937 * i;
      p.lineTo(X + R * Math.cos(a), Y + R * Math.sin(a));
    }
    p.close();
    return p;
}

tests.push({
    description: 'Draw 10K colored regions',
    setup: function(CanvasKit, ctx) {
        ctx.canvas = ctx.surface.getCanvas();
    },
    test: function(CanvasKit, ctx) {
        // Draw a lot of colored squares.
        for (let i=0; i<10000; i++) {
            const x = Math.random()*550;
            const y = Math.random()*550;
            ctx.canvas.save();
            ctx.canvas.clipRect(CanvasKit.LTRBRect(x, y, x+50, y+50),
                                CanvasKit.ClipOp.Intersect, false);
            ctx.canvas.drawColor(randomColor(CanvasKit), CanvasKit.BlendMode.SrcOver);
            ctx.canvas.restore();
        }
        ctx.surface.flush();
    },
    teardown: function(CanvasKit, ctx) {},
    perfKey: 'canvas_drawColor',
});

tests.push({
    description: 'Compute tonal colors',
    setup: function(CanvasKit, ctx) {},
    test: function(CanvasKit, ctx) {
        for (let i = 0; i < 10; i++) {
            const input = {
                ambient: randomColor(CanvasKit),
                spot: randomColor(CanvasKit),
            };
            const out = CanvasKit.computeTonalColors(input);
            if (out.spot[2] > 10 || out.ambient[3] > 10) {
                // Something to make sure v8 can't optimize away the return value
                throw 'not possible';
            }
        }
    },
    teardown: function(CanvasKit, ctx) {},
    perfKey: 'computeTonalColors',
});

tests.push({
    description: 'Get and set the color to a paint',
    setup: function(CanvasKit, ctx) {
        ctx.paint = new CanvasKit.SkPaint();
    },
    test: function(CanvasKit, ctx) {
        for (let i = 0; i < 10; i++) {
            ctx.paint.setColor(randomColor(CanvasKit));
            const color = ctx.paint.getColor();
            if (color[3] > 4) {
                // Something to make sure v8 can't optimize away the return value
                throw 'not possible';
            }
        }
    },
    teardown: function(CanvasKit, ctx) {
        ctx.paint.delete();
    },
    perfKey: 'paint_setColor_getColor',
});

tests.push({
    description: 'Set the color to a paint by components',
    setup: function(CanvasKit, ctx) {
        ctx.paint = new CanvasKit.SkPaint();
    },
    test: function(CanvasKit, ctx) {
        const r = Math.random();
        const g = Math.random();
        const b = Math.random();
        const a = Math.random();
        for (let i = 0; i < 10000; i++) {
            ctx.paint.setColorComponents(r, g, b, a);
        }
    },
    teardown: function(CanvasKit, ctx) {
        ctx.paint.delete();
    },
    perfKey: 'paint_setColorComponents',
});

tests.push({
    description: 'Draw a shadow with tonal colors',
    setup: function(CanvasKit, ctx) {
        ctx.canvas = ctx.surface.getCanvas();

        ctx.input = {
            ambient: CanvasKit.Color4f(0.2, 0.1, 0.3, 0.5),
            spot: CanvasKit.Color4f(0.8, 0.8, 0.9, 0.9),
        };
        ctx.lightRadius = 30;
        ctx.flags = 0;
        ctx.lightPos = [250,150,300];
        ctx.zPlaneParams = [0,0,1];
        ctx.path = starPath(CanvasKit);
    },
    test: function(CanvasKit, ctx) {
        const out = CanvasKit.computeTonalColors(ctx.input);
        ctx.canvas.drawShadow(ctx.path, ctx.zPlaneParams, ctx.lightPos, ctx.lightRadius,
                              out.ambient, out.spot, ctx.flags);
        ctx.surface.flush();
    },
    teardown: function(CanvasKit, ctx) {},
    perfKey: 'canvas_drawShadow',
});

tests.push({
    description: 'Draw a gradient with an array of 10K colors',
    setup: function(CanvasKit, ctx) {
        ctx.canvas = ctx.surface.getCanvas();
    },
    test: function(CanvasKit, ctx) {
        ctx.canvas.clear(CanvasKit.WHITE);

        const num = 10000;
        colors = Array(num);
        positions = Array(num);
        // Create an array of colors spaced evenly along the 0..1 range of positions.
        for (let i=0; i<num; i++) {
            colors[i] = randomColor(CanvasKit);
            positions[i] = i/num;
        }
        // make a gradient from those colors
        const shader = CanvasKit.SkShader.MakeRadialGradient(
            [300, 300], 50, // center, radius
            colors, positions,
            CanvasKit.TileMode.Mirror,
        );
        // Fill the canvas using the gradient shader.
        const paint = new CanvasKit.SkPaint();
        paint.setStyle(CanvasKit.PaintStyle.Fill);
        paint.setShader(shader);
        ctx.canvas.drawPaint(paint);
        ctx.surface.flush();

        shader.delete();
        paint.delete();
    },
    teardown: function(CanvasKit, ctx) {},
    perfKey: 'canvas_drawHugeGradient',
});

// TODO(nifong): handle tests that have data dependencies such as test images.

// 3x3 matrix ops
tests.push({
    description: 'Multiply 3x3 matrices together',
    setup: function(CanvasKit, ctx) {
        ctx.first = CanvasKit.SkMatrix.rotated(Math.PI/2, 10, 20);
        ctx.second = CanvasKit.SkMatrix.scaled(1, 2, 3, 4);
    },
    test: function(CanvasKit, ctx) {
        ctx.result = CanvasKit.SkMatrix.multiply(ctx.first, ctx.second);
        if (ctx.result.length === 18) {
            throw 'this is here to keep the result from being optimized away';
        }
    },
    teardown: function(CanvasKit, ctx) {},
    perfKey: 'skmatrix_multiply',
});

tests.push({
    description: 'Transform a point using a matrix (mapPoint)',
    setup: function(CanvasKit, ctx) {
        ctx.matr = CanvasKit.SkMatrix.multiply(
            CanvasKit.SkMatrix.rotated(Math.PI/2, 10, 20),
            CanvasKit.SkMatrix.scaled(1, 2, 3, 4),
        ); // make an arbitrary, but interesting matrix
    },
    test: function(CanvasKit, ctx) {
        for (let i = 0; i < 30; i++) {
            const pt = CanvasKit.SkMatrix.mapPoints(ctx.matr, [i, i]);
            if (pt.length === 18) {
                throw 'this is here to keep pt from being optimized away';
            }
        }
    },
    teardown: function(CanvasKit, ctx) {},
    perfKey: 'skmatrix_transformPoint',
});

tests.push({
    description: 'Invert a 3x3 matrix',
    setup: function(CanvasKit, ctx) {
        ctx.matr = CanvasKit.SkMatrix.multiply(
            CanvasKit.SkMatrix.rotated(Math.PI/2, 10, 20),
            CanvasKit.SkMatrix.scaled(1, 2, 3, 4),
        );
    },
    test: function(CanvasKit, ctx) {
        ctx.result = CanvasKit.SkMatrix.invert(ctx.matr);
        if (ctx.result.length === 18) {
            throw 'this is here to keep the result from being optimized away';
        }
    },
    teardown: function(CanvasKit, ctx) {},
    perfKey: 'skmatrix_invert',
});

tests.push({
    description: 'Create a shader from a 3x3 matrix',
    setup: function(CanvasKit, ctx) {
        ctx.matr = CanvasKit.SkMatrix.multiply(
            CanvasKit.SkMatrix.rotated(Math.PI/2, 10, 20),
            CanvasKit.SkMatrix.scaled(1, 2, 3, 4),
        );
    },
    test: function(CanvasKit, ctx) {
        const shader = CanvasKit.SkShader.MakeSweepGradient(
            100, 100,
            [CanvasKit.GREEN, CanvasKit.BLUE],
            [0.0, 1.0],
            CanvasKit.TileMode.Clamp,
            ctx.matr);
        shader.delete();
    },
    teardown: function(CanvasKit, ctx) {},
    perfKey: 'skmatrix_makeShader',
});

// 4x4 matrix operations
tests.push({
    description: 'Multiply 4x4 matrices together',
    setup: function(CanvasKit, ctx) {
        ctx.first = CanvasKit.SkM44.rotated([10, 20], Math.PI/2);
        ctx.second = CanvasKit.SkM44.scaled([1, 2, 3]);
    },
    test: function(CanvasKit, ctx) {
        ctx.result = CanvasKit.SkM44.multiply(ctx.first, ctx.second);
        if (ctx.result.length === 18) {
            throw 'this is here to keep the result from being optimized away';
        }
    },
    teardown: function(CanvasKit, ctx) {},
    perfKey: 'skm44_multiply',
});

tests.push({
    description: 'Invert a 4x4 matrix',
    setup: function(CanvasKit, ctx) {
        ctx.matr = CanvasKit.SkM44.multiply(
            CanvasKit.SkM44.rotated([10, 20], Math.PI/2),
            CanvasKit.SkM44.scaled([1, 2, 3]),
        );
    },
    test: function(CanvasKit, ctx) {
        ctx.result = CanvasKit.SkM44.invert(ctx.matr);
        if (ctx.result.length === 18) {
            throw 'this is here to keep the result from being optimized away';
        }
    },
    teardown: function(CanvasKit, ctx) {},
    perfKey: 'skm44_invert',
});

tests.push({
    description: 'Concat 4x4 matrix on a canvas',
    setup: function(CanvasKit, ctx) {
        ctx.canvas = new CanvasKit.SkCanvas();
        ctx.matr = CanvasKit.SkM44.multiply(
            CanvasKit.SkM44.rotated([10, 20], Math.PI/2),
            CanvasKit.SkM44.scaled([1, 2, 3]),
        );
    },
    test: function(CanvasKit, ctx) {
        ctx.canvas.concat(ctx.matr);
    },
    teardown: function(CanvasKit, ctx) {
        ctx.canvas.delete();
    },
    perfKey: 'skm44_concat',
});

// DOMMatrix operations
tests.push({
    description: 'Multiply DOM matrices together',
    setup: function(CanvasKit, ctx) {
        ctx.first = new DOMMatrix().translate(10, 20).rotate(90).translate(-10, -20);
        ctx.second = new DOMMatrix().translate(3, 4).scale(1, 2).translate(-3, -4);
    },
    test: function(CanvasKit, ctx) {
        const result = ctx.first.multiply(ctx.second);
        if (result.length === 18) {
            throw 'this is here to keep the result from being optimized away';
        }
    },
    teardown: function(CanvasKit, ctx) {},
    perfKey: 'dommatrix_multiply',
});

tests.push({
    description: 'Transform a point using a matrix (transformPoint)',
    setup: function(CanvasKit, ctx) {
        ctx.matr = new DOMMatrix().translate(10, 20).rotate(90).translate(-10, -20)
            .multiply(new DOMMatrix().translate(3, 4).scale(1, 2).translate(-3, -4));

        ctx.reusablePt = new DOMPoint(0, 0)
    },
    test: function(CanvasKit, ctx) {
        for (let i = 0; i < 30; i++) {
            ctx.reusablePt.X = i; ctx.reusablePt.Y = i;
            const pt = ctx.matr.transformPoint(ctx.reusablePt);
            if (pt.length === 18) {
                throw 'this is here to keep pt from being optimized away';
            }
        }
    },
    teardown: function(CanvasKit, ctx) {},
    perfKey: 'dommatrix_transformPoint',
});

tests.push({
    description: 'Invert a DOM matrix',
    setup: function(CanvasKit, ctx) {
        ctx.matr = new DOMMatrix().translate(10, 20).rotate(90).translate(-10, -20)
            .multiply(new DOMMatrix().translate(3, 4).scale(1, 2).translate(-3, -4));
    },
    test: function(CanvasKit, ctx) {
        const inverted = ctx.matr.inverse();
        if (inverted.length === 18) {
            throw 'this is here to keep the result from being optimized away';
        }
    },
    teardown: function(CanvasKit, ctx) {},
    perfKey: 'dommatrix_invert',
});

tests.push({
    description: 'make a shader from a DOMMatrix',
    setup: function(CanvasKit, ctx) {
        ctx.matr = new DOMMatrix().translate(10, 20).rotate(90).translate(-10, -20)
            .multiply(new DOMMatrix().translate(3, 4).scale(1, 2).translate(-3, -4));
    },
    test: function(CanvasKit, ctx) {
        const shader = CanvasKit.SkShader.MakeSweepGradient(
            100, 100,
            [CanvasKit.GREEN, CanvasKit.BLUE],
            [0.0, 1.0],
            CanvasKit.TileMode.Clamp,
            ctx.matr);
        shader.delete();
    },
    teardown: function(CanvasKit, ctx) {},
    perfKey: 'dommatrix_makeShader',
});