JavaScript Canvas Series: From Basic Drawing to Game, Data Viz & Creative Coding
JavaScript Canvas: Từ vẽ cơ bản đến Game, Data Viz & Creative Coding
This Canvas programming guide is currently only available in Vietnamese. Please toggle the language switch (🇻🇳) in the top navigation to read the roadmap.
Welcome to our comprehensive JavaScript Canvas series. HTML5 Canvas is one of the most powerful browser APIs — enabling 2D graphics, smooth animations, game development, data visualization and digital art entirely in JavaScript. This 17-lesson series takes you from first strokes to building complex graphical applications.
Chào mừng bạn đến với chuỗi bài học JavaScript Canvas toàn diện. HTML5 Canvas là một trong những API mạnh mẽ nhất của trình duyệt — cho phép bạn vẽ đồ họa 2D, tạo animation mượt mà, xây dựng game, trực quan hóa dữ liệu và tạo nghệ thuật số hoàn toàn bằng JavaScript. Series 17 bài này sẽ đưa bạn từ những nét vẽ đầu tiên đến việc xây dựng các ứng dụng đồ họa phức tạp.
Dưới đây là lộ trình 17 bài học được thiết kế chi tiết:
Bài 1: Canvas API Cơ Bản: Hệ Tọa Độ, Shapes & Colors
getContext('2d'), hệ tọa độ, rect/arc/path, stroke/fill, colors, gradients, patterns.
Bài 2: Text Rendering & Image Drawing trên Canvas
Font, align, baseline, measureText, drawImage (crop, scale, sprite sheet), image loading patterns.
Bài 3: Transform & State: translate, rotate, scale & Ma Trận
translate/rotate/scale, save/restore state stack, setTransform, transform composition. + Demo tương tác.
Bài 4: Compositing, Độ trong suốt & Clipping
globalAlpha, 26 chế độ globalCompositeOperation, clip(), Path2D, setLineDash, shadow/glow. + Demo tương tác.
Bài 5: Pixel Manipulation: Image Filters & Color Picker
getImageData/putImageData, duyệt pixel RGBA, filters (grayscale, sepia, blur, edge detection). + Demo tương tác.
Bài 6: Toán Nền Tảng: Lượng Giác, Vector 2D & Ma Trận
sin/cos/atan2, vector operations, rotation matrix, polar coordinates. Ref: Nature of Code. + Demo tương tác.
Bài 7: Animation Loop: requestAnimationFrame & Delta Time
Game loop pattern, FPS counter, delta time, sprite animation cơ bản. + Demo tương tác.
Bài 8: Easing & Tweening: Công Thức Animation Chuyên Sâu
Robert Penner easing functions, Bezier curves, spring animation (Hooke's law), tween engine. Ref: easings.net. + Demo tương tác.
Bài 9: Sprite Animation & Spritesheet
drawImage 9 tham số, frame timing, animation state machine (idle/walk/run/jump), texture atlas. + Demo tương tác.
Bài 10: Responsive Canvas & HiDPI Scaling
devicePixelRatio, HiDPI crisp rendering, ResizeObserver, aspect ratio, fullscreen API, mobile touch. + Demo tương tác.
Bài 11: Interaction: Mouse, Touch & Hit Detection
Coordinate mapping, pointer events, hit detection (rect/circle/polygon/pixel), drag & drop. + Demo tương tác.
Bài 12: Vật Lý: Velocity, Gravity, Friction & Spring
Acceleration, bouncing, friction/drag, spring physics, pendulum, Euler vs Verlet. Ref: Nature of Code. + Demo tương tác.
Bài 13: Collision Detection & Particle Systems
AABB, circle-circle, SAT. Particle emitter, lifecycle, forces, trails. Ref: MDN 2D collision. + Demo tương tác.
Bài 14: Game Development: Entity System & Mini Platformer
Entity-component, scene management, tile map, camera scrolling, mini playable game. + Demo tương tác.
Bài 15: Web Audio API & Game Juice
AudioContext, oscillator SFX (ADSR), AnalyserNode visualization, screen shake, hit feedback, squash & stretch. + Demo tương tác.
Bài 16: Data Visualization: Charts & Graphs từ Scratch
Bar, line, pie, donut, radar chart. Axes, labels, legends, animated tooltips. + Demo tương tác.
Bài 17: Creative Coding & Performance Optimization
Perlin noise, flow fields, L-systems, fractals. Offscreen canvas, web workers, WebGL intro, export PNG/GIF. + Demo tương tác.