đŸŽ¯ Basic Shapes đŸ”Ĩ Performance 🔄 Animation 🎮 Game Demo 🛠ī¸ Playground

🚀 WebGL Canvas

GPU-Powered 2D Graphics with HTML5 Canvas-like API
Easy to use â€ĸ Blazingly Fast â€ĸ Game Ready
🛠ī¸ Open Playground
⚡

GPU Accelerated

Hardware-accelerated rendering for smooth 60fps graphics, leagues faster than traditional canvas

🎨

Canvas-like API

Familiar methods like fillRect(), drawCircle(), drawLine()

🎮

Game Ready

Perfect for 2D games, visualizations, and interactive graphics

🎭

Custom Shaders

Easy integration of custom fragment and vertex shaders

đŸŽ¯ Basic Shapes Demo

// Basic usage example
const canvas = document.getElementById('myCanvas');
const ctx = new WebGLCanvas(canvas, {
  enableFullscreen: true // Add fullscreen button
});

// Draw like HTML5 Canvas but with WebGL power!
ctx.fillStyle = '#ff6b6b';
ctx.fillRect(50, 50, 200, 100);

ctx.fillStyle = '#4ecdc4';
ctx.fillCircle(400, 100, 60);

ctx.strokeStyle = '#45b7d1';
ctx.lineWidth = 3;
ctx.drawLine(50, 200, 400, 200);

đŸ”Ĩ Performance Comparison: WebGL vs Canvas2D

⚠ī¸ This test renders thousands of objects to showcase performance differences. May be intensive on older devices.
💡 Click the canvas to focus it and use arrow keys without scrolling the page!
đŸ–Ĩī¸ Look for the fullscreen button in the bottom-right corner of WebGL canvas!

🚀 WebGL Canvas

0
Objects
0
FPS
0
Draw Calls
0ms
Render Time
Use global controls below

🎨 Canvas2D

0
Objects
0
FPS
0
Draw Calls
0ms
Render Time
Use global controls below

🔄 Animation & Transforms

// Animation with transforms
function animate() {
  ctx.clear();
  ctx.save();

  // Rotate and animate
  ctx.translate(400, 200);
  ctx.rotate(time * 0.01);
  ctx.fillStyle = '#ff9ff3';
  ctx.fillRect(-50, -50, 100, 100);

  ctx.restore();
  requestAnimationFrame(animate);
}

🎮 Mini Game Demo

Score: 0
Lives: 3
Level: 1

🎮 Game Controls

W A S D or Arrow Keys - Move Ship
SPACE - Shoot â€ĸ P - Pause
💡 Click on any canvas to focus it and prevent page scrolling with arrow keys
đŸ–Ĩī¸ Use the fullscreen button in the bottom-right corner for immersive gaming!

Game Over!

Final Score: 0