2D Scaling Matrix Generator
Generate standard $2\times 2$ diagonal scaling matrices and $3\times 3$ affine transformation matrices in real time. Visualize uniform and differential scaling on an interactive Cartesian coordinate canvas, scale about custom center pivots $(c_x, c_y)$, inspect area magnification factors, and export code directly to CSS, SVG, Python, and JavaScript.
Scale shapes relative to a custom center point rather than the origin. Points move outward or inward relative to C.
transform: scale(2, 2);
How to Calculate 2D Scaling Transformation Matrices
A 2D scaling matrix expands, contracts, or reflects coordinates along the Cartesian axes. For horizontal scale factor s_x and vertical scale factor s_y, the 2x2 matrix has s_x and s_y on the main diagonal with 0s elsewhere. Coordinates map as x' = s_x · x and y' = s_y · y. The determinant det(S) = s_x · s_y represents the exact geometric area scale factor.
What is 2D Scaling in Linear Algebra?
In linear algebra and Euclidean geometry, a 2D scaling transformation is a linear mapping that multiplies the coordinates of every point in the plane by independent scale factors along each orthogonal basis direction. Depending on the values of the scale factors $s_x$ and $s_y$, the geometry undergoes expansion, contraction, reflection, or dimension collapse.
When horizontal and vertical scale factors are identical, all distances from the origin change by the exact ratio $s$. The shape expands or shrinks uniformly, preserving all internal angles, aspect ratios, and geometric similarity.
When horizontal and vertical scale factors differ, the geometry is stretched along one axis relative to the other. Aspect ratios change, internal angles are altered, and circles distort into ellipses with semi-major axes governed by $s_x$ and $s_y$.
Derivation of the 2D Scaling Matrix
Every linear transformation T on the Cartesian plane ℝ² is completely determined by how it acts on the standard Euclidean basis vectors e₁ = [1, 0]ᵀ and e₂ = [0, 1]ᵀ.
T(e₁) = S · [1, 0]ᵀ = [s_x · 1, s_y · 0]ᵀ = [s_x, 0]ᵀ
T(e₂) = S · [0, 1]ᵀ = [s_x · 0, s_y · 1]ᵀ = [0, s_y]ᵀ
Constructing the transformation matrix S by placing T(e₁) and T(e₂) as column vectors yields the canonical 2×2 scaling matrix:
Multiplying any arbitrary coordinate vector v = [x, y]ᵀ by S produces the scaled coordinates:
Scaling About an Arbitrary Center Point C = (c_x, c_y)
The standard 2×2 scaling matrix scales all coordinates relative to the coordinate origin (0, 0). If an object is located away from the origin, scaling by S not only resizes it but also translates its center of mass away from or toward the origin.
- Translate Center to Origin: Shift all points by T(-c_x, -c_y) so that the pivot point (c_x, c_y) aligns with (0, 0).
- Scale at Origin: Apply the standard scaling matrix S(s_x, s_y).
- Translate Back: Reverse the initial shift by applying T(c_x, c_y) to restore the center position.
Algebraically, the resulting coordinates for any point (x, y) are given by:
In computer graphics pipelines, this composite transformation is represented in 3×3 homogeneous coordinates as a single matrix multiplication:
Determinant and Surface Area Magnification
The determinant of any linear transformation matrix measures how the transformation scales 2D surface area. For a diagonal scaling matrix, computing the determinant is instantaneous:
Orientation is preserved. Vertex order (clockwise vs. counter-clockwise) remains identical.
Orientation is inverted (reflection). One coordinate axis is flipped, reversing vertex winding.
Degenerate/Singular projection. Geometry collapses into a 1D line or 0D point. Area is zero.
This aligns precisely with the Jacobian determinant in multivariable calculus: when substituting variables under x = s_x · u, y = s_y · v, the differential area element scales as dx dy = |det(J)| du dv = |s_x · s_y| du dv.
Eigenvalues, Eigenvectors, and Matrix Inverses
Because a 2D scaling matrix is already diagonal in the standard Euclidean basis, its spectral properties are immediately readable:
- • λ₁ = s_x with eigenvector v₁ = [1, 0]ᵀ (X-axis)
- • λ₂ = s_y with eigenvector v₂ = [0, 1]ᵀ (Y-axis)
The coordinate axes themselves represent the invariant eigen-directions.
Multiplying S by S⁻¹ produces the identity matrix I₂, reversing the scale exactly.
Worked Numerical Examples
Problem: Scale point P(2, -4) uniformly by factor s = 3. Find the new coordinates and area magnification factor.
1. Form matrix: S = [ [3, 0], [0, 3] ]
2. Multiply: [x', y']ᵀ = [ [3, 0], [0, 3] ] · [2, -4]ᵀ = [3(2), 3(-4)]ᵀ = [6, -12]ᵀ
3. Area factor: det(S) = 3 × 3 = 9.0
Answer: P' = (6, -12); surface area expands by 9×.
Problem: A rectangle with vertices at (0,0), (3,0), (3,2), (0,2) has area 3 × 2 = 6. Scale with s_x = 2, s_y = 0.5.
1. Transformed vertices: (0·2, 0·0.5)=(0,0); (3·2, 0·0.5)=(6,0); (3·2, 2·0.5)=(6,1); (0·2, 2·0.5)=(0,1)
2. New dimensions: Width = 6, Height = 1
3. New Area: 6 × 1 = 6; det(S) = 2 × 0.5 = 1.0
Answer: Vertices are (0,0), (6,0), (6,1), (0,1). Area is unchanged because det(S) = 1.0.
Problem: Scale point P(5, 7) by uniform factor s = 2 using center of scaling C(3, 4).
1. Subtract center: Δx = 5 - 3 = 2, Δy = 7 - 4 = 3
2. Scale displacements: Δx' = 2 × 2 = 4, Δy' = 2 × 3 = 6
3. Add center back: x' = 4 + 3 = 7, y' = 6 + 4 = 10
Answer: P' = (7, 10). Notice distance from C doubled from √13 to 2√13.
Where 2D Scaling Matrices Are Used
1. Web Standards (CSS & SVG)
Modern web rendering engines execute hardware-accelerated matrix transforms. CSS properties like `transform: scale(sx, sy)` and SVG `transform="matrix(sx, 0, 0, sy, 0, 0)"` apply these exact linear transformations via the user's GPU compositor.
2. Computer Vision & AI Augmentation
In convolutional neural network (CNN) and vision transformer training, random scaling matrices augment dataset diversity. Bounding boxes in object detection (YOLO, Faster R-CNN) transform their vertex coordinates via $S(s_x, s_y)$.
3. CAD & Architectural Drafting
AutoCAD and architectural blueprint software use scaling matrices to project real-world millimeter dimensions onto scaled viewport layouts (e.g. 1:50 or 1:100 scale architectural plans).
4. Video Games & Canvas Rendering
2D game engines (Unity 2D, Godot, PixiJS) compute local-to-world model matrices by multiplying Translation $\times$ Rotation $\times$ Scale ($TRS$) for every sprite and hitbox in the game scene.
Common Pitfalls & How to Avoid Them
Pitfall 1: Confusing Origin Scaling with Center-of-Object Scaling
Applying $S$ directly to an object centered at $(100, 100)$ with $s = 2$ moves its center to $(200, 200)$, inadvertently flying it across the screen. Always use the affine formulation $x' = s(x - c_x) + c_x$ to scale an object in place around its own bounding box centroid.
Pitfall 2: Forgetting That Scale Factors Multiply for Area, Not Add
If an image is enlarged by $s = 2$, its surface area quadruples ($2^2 = 4$), not doubles. Similarly, perimeter scales linearly by $s$, but area scales quadratically by $s^2$.
Pitfall 3: Matrix Multiplication Order with Rotation & Shear
While two diagonal scaling matrices commute with each other ($S_1 S_2 = S_2 S_1$), scaling does not commute with rotation or shearing in general ($R \cdot S \neq S \cdot R$). Scaling first then rotating stretches along the local object axes; rotating first then scaling stretches along the world axes!