Home▸Mathematics▸Matrix Transformations (2D)

🟦 Matrix Transformations (2D)

Interactive 2D Canvas matrix transformation visualizer. Adjust the a, b, c, d entries of a 2x2 matrix or pick a preset (rotation, scale, shear, reflection) and watch a shape, the coordinate grid and the unit circle transform in real time, with live determinant and area-scale readouts.

Mathematics2DEasy60 FPS📱 Mobile-adapted⇄ 3D version

Details

CategoryMathematics

RenderingCanvas 2D

DifficultyEasy

Target FPS60

ControlsMatrix entry sliders a, b, c, d, Preset buttons (identity, rotate 45°, rotate 90°, scale x2, shear X, reflect X, reflect Y, compress), Shape selector (square, triangle, star, letter L), Grid toggle, Basis vectors toggle, Eigenvectors toggle, Unit circle toggle, Animate toggle, Reset view button

linear algebramatrixeigenvectorsdeterminantgeometrycanvas2d

Related simulations

Linear Algebra Simulator (2D)A Canvas2D 2x2 matrix-transform lab showing the deforming grid, basis vectors, eigenvectors…

Eigenvalues & Eigenvectors — Linear Transformation VisualiserInteractive 2×2 matrix transformation visualiser. Drag matrix entries to see how…

Linear Algebra SimulatorWatch a 2x2 matrix transform a live vector grid in real time: see basis vectors,… ⊞ All 378 in Mathematics →

⚙ Under the hood

Drag four sliders to build any 2x2 matrix and watch it transform a shape, the coordinate grid and the unit circle on a Canvas2D scene. Live readouts show the determinant, area-scale factor, trace and eigenvalues, and eight presets jump straight to rotation, scaling, shear and reflection matrices.

linear algebramatrixeigenvectorsdeterminantgeometrycanvas2d

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install