JavaScript · Frontend · Canvas

Canvas from Scratch: Frame Animation, a Vibe-Coded Shooter, and the Declarative Power of ECharts

By Asize · Jun 26, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Canvas remains the foundation for any browser-based game, interactive visualization, or high-performance graphics. Understanding its frame loop and how libraries like ECharts build on it separates developers who can only style divs from those who can build real-time experiences. The Vibe Coding workflow shown here — AI-assisted ideation, code generation, and human review — is becoming a practical skill for shipping projects faster.

Summary

Canvas is not a DOM replacement — it's a bitmap drawing surface that excels at dynamic graphics, games, and data visualization. This practical guide starts with the Canvas tag, the 2D context, and the core drawing APIs (fillRect, strokeRect, clearRect), then builds up to frame animation using requestAnimationFrame instead of setInterval for smooth, performance-friendly loops.

The centerpiece is a complete airplane shooter game developed with a Vibe Coding workflow: an AI Agent helps brainstorm features, generate code, and iterate. The game implements a full game loop — clear, update, draw — with player movement, enemy spawning with difficulty scaling, AABB collision detection, and explosion effects. The code is modular and production-ready.

Finally, the guide shifts to ECharts, showing how declarative configuration (option objects) replaces manual Canvas calls for data dashboards. An AI Agent generates a complete multi-chart dashboard with KPI animations, illustrating the contrast between imperative drawing and declarative visualization. The takeaway: Canvas gives you raw power; ECharts gives you speed and abstraction.

Takeaways

— Canvas width/height attributes set actual pixel dimensions, not CSS display size; default is 300×150.

— getContext('2d') returns the 2D drawing context; getContext('webgl') enables 3D with GPU acceleration.

— Frame animation follows a three-step loop: clear (clearRect), update (state changes), draw (rendering).

— requestAnimationFrame syncs with the display refresh rate and auto-pauses when the tab is hidden, outperforming setInterval.

— AABB collision detection checks overlap on both axes: a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y.

— ECharts uses declarative option objects (title, xAxis, yAxis, series) to render charts without manual Canvas calls.

— Vibe Coding workflow: brainstorm MVP with AI, generate code skeleton, then manually review and iterate.

— The airplane game uses difficulty scaling: enemy spawn interval decreases with score (Math.max(400, 1200 - score * 2)).

Conclusions

The contrast between imperative Canvas drawing and declarative ECharts configuration is a microcosm of the broader shift from manual DOM manipulation to framework abstractions.

Using requestAnimationFrame for KPI number animations in ECharts dashboards shows how the same low-level API powers both games and data visualization.

The Vibe Coding approach — AI generates the skeleton, human reviews and debugs — mirrors how experienced developers use Copilot today, but applied to a complete project lifecycle.

Canvas games are a natural teaching tool for the render loop concept, which transfers directly to understanding React's reconciliation, game engines, and animation frameworks.

The enemy spawn logic (20% elite enemies with 2 HP) demonstrates how small probabilistic design decisions create emergent difficulty without complex AI.

Concepts & terms

Canvas 2D Context

The object returned by getContext('2d') that provides all drawing methods (fillRect, strokeRect, clearRect) and properties (fillStyle, strokeStyle, lineWidth) for bitmap rendering in the browser.

requestAnimationFrame

A browser API that schedules a function to run before the next repaint, syncing with the display's refresh rate (typically 60Hz). It replaces setInterval for smooth, power-efficient animations.

AABB Collision Detection

Axis-Aligned Bounding Box collision detection checks whether two rectangles overlap by comparing their x, y, width, and height values. It's the simplest and fastest collision algorithm for 2D games.

Declarative Configuration

A programming style where you describe what you want (e.g., 'a bar chart with these data points') rather than how to draw it step by step. ECharts uses this approach via option objects.

Vibe Coding

A development workflow where an AI Agent (LLM) assists with brainstorming, code generation, and iteration, while the human reviews, debugs, and refines the output. It emphasizes rapid prototyping and human-AI collaboration.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗