# transformation

[browser](../..) ⟩ [canvas](..) ⟩[ state]() ⟩ current transformation matrix

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
[.translate()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate), [.rotate()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate), [.scale()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/scale) will <mark style="color:red;">**alter**</mark> the <mark style="color:yellow;">**current transformation matrix**</mark>.
{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}
* examples
  * [koch-snowflake](matrix/koch-snowflake "mention")
  * [fractal](../examples/fractal "mention")
{% endtab %}

{% tab title="💈範例" %}
![canvas transformations](https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2F5ZTQ39pKGRhGML2vRTDT%2Fcanvas%20transformations.png?alt=media\&token=c7399431-cfc9-482c-a58b-3087e8d355bd)

:floppy\_disk: replit：[canvas transformations](https://replit.com/@pegasusroe/canvas-transformation-matrix#script.js)

⬆️ 需要： [drawoncanvas2d](../+ext/drawoncanvas2d "mention")

```javascript
const { PI } = Math;
const { log } = console;

// degrees
function deg(x) { return PI * x / 180 }

// draw on canvas
drawOnCanvas2D('#playground', (ctx) => {

    const rect = [0, 0, 80, 80];

    // tranform and draw square 
    function transform(hue, trans){
        // transform current transformation matrix if necessary
        if (trans) trans(ctx);
        // log current transformation matrix
        const {a,b,c,d,e,f} = ctx.getTransform();
        log([a,b,c,d,e,f]);
        // draw rect with specified hue
        ctx.fillStyle = `hsl(${hue} 80% 50% / 0.8)`;
        ctx.fillRect(...rect);
        ctx.strokeRect(...rect);
    }

    // original square
    transform(0);

    // translate
    transform(30, (ctx) => ctx.translate(110, 30));

    // rotate
    transform(60, (ctx) => ctx.rotate(deg(60)));

    // dilate (scale)
    transform(90, (ctx) => ctx.scale(.5, .5));

    // freeform transform
    transform(180, (ctx) => ctx.transform(1, .5, .5, 1, 0, 0));

    // reset current transformation matrix to identity 
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    
    // scale
    transform(210, (ctx) => ctx.scale(.25, 2));

});
```
{% endtab %}

{% tab title="📘 手冊" %}
* [CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) ⟩
  * current transformation matrix
    * [.setTransform()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setTransform) - overrides the current transformation matrix.
    * [.getTransform()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getTransform) - returns[ DOMMatrix](https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix).
  * apply transformations to <mark style="color:yellow;">**current transformation matrix**</mark>:
    * [.translate()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate), [.rotate()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate), [.scale()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/scale), [.transform()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform)
{% endtab %}
{% endtabs %}
