greggman · April 19, 2025 06:44
diff --git a/README.md b/README.md
diff --git a/index.css b/index.css
 canvas {
  background-color: #888;
 }
diff --git a/index.html b/index.html
 <canvas></canvas>
diff --git a/index.js b/index.js
 const ctx = document.querySelector('canvas').getContext('2d');

 // Canvas 2d starts with CSS pixel space so we don't need to transform to clip space
 ctx.translate(25, 25);
 ctx.rotate(45 * Math.PI / 180);
 ctx.translate(-25, -25);
 ctx.fillRect(0, 0, 50, 50);
diff --git a/jsGist.json b/jsGist.json
 {"name":"Canvas 2D Matrix Math","settings":{},"filenames":["index.html","index.css","index.js"]}
	const ctx = document.querySelector('canvas').getContext('2d');

	// Canvas 2d starts with CSS pixel space so we don't need to transform to clip space
	ctx.translate(25, 25);
	ctx.rotate(45 * Math.PI / 180);
	ctx.translate(-25, -25);
	ctx.fillRect(0, 0, 50, 50);