สร้าง transformation matrix ด้วย HTML5 อย่างไร?

HTML5 canvas มีเมธอดที่อนุญาตให้แก้ไข transformation matrix โดยตรง Transformation matrix ต้องเป็น identity transform เริ่มต้น แล้วค่อยปรับด้วย transformation methods

S No.	Method and Description
1	transform(m11, m12, m21, m22, dx, dy) เปลี่ยน transformation matrix ให้ใช้ matrix จาก arguments
2	setTransform(m11, m12, m21, m22, dx, dy) เปลี่ยน transformation matrix เป็น matrix จาก arguments

เมธอด transform(m11, m12, m21, m22, dx, dy) ต้องคูณ current transformation matrix กับ matrix ที่อธิบายโดย:

m11  m21  dx
m12  m22  dy
0    0    1

เพื่อสร้าง transformation matrix ให้ใช้ MathML

ตัวอย่าง

ตัวอย่างง่ายๆ ใช้ transform() และ setTransform():

<!Doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Pythagorean theorem</title>
  </head>
  <body>
    <math xmlns="https://www.w3.org/1998/Math/MathML">
      <mrow>
        <msup><mi>a</mi><mn>2</mn></msup>
        <mo>+</mo>
        <msup><mi>b</mi><mn>2</mn></msup>
        <mo>=</mo>
        <msup><mi>c</mi><mn>2</mn></msup>
      </mrow>
    </math>
  </body>
</html>