Question

I don’t understand what the Transformation Matrix is and how to work with it.

The following will draw a circle at 0, 0 of my canvas: (generated from an svg converted with svg2canvas.jar)

drawPoints: function(ctx, max_points)
        {
            ctx.save();

            ctx.setTransform(1, 0, 0, 1, -551.23701, -368.42499);

            ctx.fillStyle="#0066ab";
            ctx.globalAlpha="0.7";
            ctx.beginPath();
            ctx.moveTo(584.50,387.96);
            ctx.bezierCurveTo(584.50,397.14,577.05,404.59,567.87,404.59);
            ctx.bezierCurveTo(558.68,404.59,551.24,397.14,551.24,387.96);
            ctx.bezierCurveTo(551.24,378.77,558.68,371.33,567.87,371.33);
            ctx.bezierCurveTo(577.05,371.33,584.50,378.77,584.50,387.96);
            ctx.closePath();
            ctx.fill();

            ctx.restore();
        }

I would like to pass in arguments for setTransform() to draw on any part of my canvas, however I don’t understand how to use it at all.

Answer 1

The transformation matrix they are referring to is the common transformation matrix found in linear algebra. Those arguments form the transformation matrix you wish to apply to your coordinates for the given shapes or paths. This page describes the transformation method. Please look specifically at the matrix they define under the method signature for transformation. It shows you which parameters go where in transformation matrix. Now please also refer to the following link. If you scroll down you will see what each element in the transformation matrix means. For instance the [0,0] element (parameter a from the HTML5 transform method signature) of the transformation matrix represents how the coordinate will scale in the X direction. Hope this helps,