{"id":15201,"date":"2026-10-01T03:37:31","date_gmt":"2026-10-01T03:37:31","guid":{"rendered":"https:\/\/playgama.com\/blog\/?p=15201"},"modified":"2026-10-01T03:37:31","modified_gmt":"2026-10-01T03:37:31","slug":"how-to-animate-sprite-sheets-using-html5-canvas-drawimage","status":"publish","type":"post","link":"https:\/\/playgama.com\/blog\/business-faqs\/how-to-animate-sprite-sheets-using-html5-canvas-drawimage\/","title":{"rendered":"How to animate sprite sheets using HTML5 Canvas drawImage?"},"content":{"rendered":"

Load the sprite sheet as one image, then each frame call drawImage() with the 9-argument form: source x\/y\/width\/height picks the current frame from the sheet, destination x\/y\/width\/height places it on the canvas. Clear the canvas and advance the frame index on a timer or via requestAnimationFrame.<\/strong><\/p>\n

At a glance<\/h2>\n\n\n\n\n\n\n\n
Fact<\/th>\nValue<\/th>\nSource<\/th>\n<\/tr>\n<\/thead>\n
drawImage() source rectangle args<\/td>\nsx, sy, sWidth, sHeight<\/td>\ndeveloper.mozilla.org<\/a><\/td>\n<\/tr>\n
iOS canvas size limit<\/td>\n4096×4096 px<\/td>\ndeveloper.mozilla.org<\/a><\/td>\n<\/tr>\n
Phaser object for animated images<\/td>\nSprite Game Object<\/td>\ndocs.phaser.io<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Put every frame in one image (a sprite sheet), load it once, then on each draw call drawImage()<\/code> with its 9-argument form: the first four numbers (sx, sy, sWidth, sHeight) crop the current frame out of the sheet, the last four place it on the canvas. “This example draws an image to the canvas using the drawImage() method” (MDN<\/a>). Advance a frame index in a timer or requestAnimationFrame<\/code> loop, and clear the canvas before each redraw so old frames don’t smear.<\/p>\n

const img = new Image();\nimg.src = 'sheet.png';\nlet frame = 0;\nconst fw = 64, fh = 64, cols = 8;\nfunction draw() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n const sx = (frame % cols) * fw;\n ctx.drawImage(img, sx, 0, fw, fh, 0, 0, fw, fh);\n frame++;\n requestAnimationFrame(draw);\n}\n<\/code><\/pre>\n
For browser games, watch canvas size limits – some mobile browsers, notably iOS, cap canvas dimensions at 4096x4096px, which limits how large or dense a single sheet can be. If you’d rather not manage frame math by hand, small libraries like Canvas-Sprite-Animations<\/a> handle sequences and caching, and Phaser’s Sprite object supports built-in animation, tinting and tweening on top of Canvas or WebGL.<\/p>\n
When using an AI coding agent, Playgama MCP<\/a> lets the agent create the game, upload builds, and publish a sandbox playable link directly from Cursor or Claude Code.<\/p>\n
Generating the sheet itself is a separate step from animating it – AI sprite tools like Ludo.ai’s Sprite Generator<\/a> or TexturePacker (for packing existing frames) produce the PNG grid you then slice with drawImage.<\/p>\n
Sources<\/h2>\n