Reflect images

The JavaScript code

Here is the complete code to accomplish this behaviour.

        var board = JXG.JSXGraph.initBoard('jxgbox', {
            boundingbox: [-5, 5, 13, -2.5],
            grid: true
        });
        var p0, p1, p2, p3, p4, p5,
            l1, l2,
            im1, im2, im3,
            t1, t2,
            imurl = "/distrib/images/uccellino.jpg",
            X, Y, W, H;          // Functions defining the position, width and height of the original image.

        // Define two line through four points
        p0 = board.create('point', [2, -2]);
        p1 = board.create('point', [2, 1]);
        p2 = board.create('point', [10, -1]);

        l1 = board.create('line', [p0, p1]);
        l2 = board.create('line', [p1, p2]);

        p4 = board.create('point', [-2, -2]);
        p5 = board.create('point', [1, 0]);

        X = function () { return Math.min(p4.X(), p5.X()); };
        Y = function () { return Math.min(p4.Y(), p5.Y()); };
        W = function () { return Math.abs(p5.X() - p4.X()); };
        H = function () { return Math.abs(p5.Y() - p4.Y()); };

        im1 = board.create('image', [imurl, [X, Y], [W, H]], { opacity: 0.7 });
        im2 = board.create('image', [imurl, [X, Y], [W, H]], { opacity: 0.7 });
        im3 = board.create('image', [imurl, [X, Y], [W, H]], { opacity: 0.7 });

        t1 = board.create('transform', [l1], { type: 'reflect' });
        t2 = board.create('transform', [l2], { type: 'reflect' });

        // Reflect im2 on l1
        t1.bindTo(im2);

        // Reflect im3 on l1 and on l2
        t1.bindTo(im3);
        t2.bindTo(im3);

        board.update();