JavaScript Canvas Sprite Drawing Tutorial (Load, Scale, Tile, Rotate Images)

Publicado em: 29 Janeiro 2015
no canal de: That Voxel Game

65,070

482

Learn how to draw images on canvas in JavaScript — this tutorial covers how to create a Sprite object that can load PNG images and draw them in different ways:

✅ Normal Sprite drawing (x, y)
✅ Stretched Sprite drawing (x, y, width, height)
✅ Tiled pattern background using createPattern
✅ Rotated Sprites (centered rotation using radians)

It’s a continuation of the previous Canvas Context Initialization tutorial, and shows how to:

✔️ Load images into a custom Sprite object
✔️ Use PNG transparency for layering
✔️ Draw images with drawImage
✔️ Create patterns for background tiling
✔️ Rotate images using translate + rotate
✔️ Save and restore canvas state

By the end of this tutorial you’ll be able to:
🎯 Create sprites from PNG files
🎯 Draw them in different modes (normal, stretched, tiled, rotated)
🎯 Animate rotation using intervals

This is foundational for building a 2D JavaScript game engine, where each tile or object is a Sprite drawn on canvas.

⏱️ Timestamps
00:00 – Intro: Drawing pictures with JavaScript Canvas
00:10 – Sprite sizes: 32x32 tiles in a game level
00:23 – Overview of different sprite draw modes
00:37 – Initializing canvas context (recap from previous tutorial)
00:53 – Why use a context object wrapper
01:05 – Sprite PNG example (wall.png) with transparency
01:40 – Starting the Sprite object constructor
01:55 – Loading images with new Image() and src
02:13 – Handling patterns with createPattern
02:29 – Drawing modes: normal, stretched, tiled, rotated
02:51 – Writing the draw() function
03:10 – Handling undefined width/height
03:29 – Drawing with drawImage() (normal or stretched)
03:59 – Preparing for rotation: translate to center
04:17 – Why rotation needs centering
04:28 – Writing the rotate() function with context save/restore
05:00 – Using radians for rotation
05:17 – Drawing centered rotated sprite
05:31 – Using multiple sprites in animation
05:45 – Loading multiple sprites (wall, crate, pattern)
06:03 – Animating rotation with setInterval
06:20 – Clearing background with black fill
06:33 – Drawing sprites in different modes
06:46 – Animating two rotating sprites at different speeds
07:00 – Final output demo: all sprites drawn and animated
07:15 – Conclusion & next tutorial preview (map drawing)

🏷️ Tags
javascript canvas sprite drawing,draw image on canvas javascript,javascript sprite tutorial,canvas drawImage example,javascript canvas tutorial,javascript canvas rotation,html5 sprite drawing tutorial,load png transparency canvas,2d sprite rotation javascript,draw stretched image canvas,javascript canvas createPattern

Nesta página do site você pode assistir ao vídeo on-line JavaScript Canvas Sprite Drawing Tutorial (Load, Scale, Tile, Rotate Images) duração hora minuto segundo em boa qualidade , que foi baixado pelo usuário That Voxel Game 29 Janeiro 2015, compartilhe o link com seus amigos e conhecidos, no youtube este vídeo já foi visto 65,070 vezes e gostou 482 espectadores. Boa visualização!

1,440