Interactive Shape Canvas
Click-to-add geometric shapes with real-time area calculations, rotation, and optional floating animations.
🎨 Click on the canvas to add shapes, or use the controls below
Interactive Canvas
Click anywhere on the canvas to add a circle
Controls
Statistics
Total Shapes:0
Circles:0
Rectangles:0
Triangles:0
Total Area:0.0 px²
Key Concepts Demonstrated
- • Canvas Rendering: HTML5 Canvas API for 2D graphics
- • Shape Primitives: Circles, rectangles, and triangles
- • Transformations: Translation and rotation using transform matrix
- • Animation: RequestAnimationFrame for smooth animations
- • Interactive Input: Mouse click handling for shape placement
- • Mathematical Calculations: Area calculations using play.ts utilities