Or create each image separately and draw with
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It only takes a minute to sign up.Sign up to join this community
Another advantage of using a Sprite Map is the fact that canvas already supports drawing 'sliced' images. When drawing an image, you can define a sourceX & sourceY as well as a targetX & targetY. In my engine this is exactly how I handled animations.
ctx.drawImage( data, sourceX, sourceY, sourceWidth, sourceHeight, targetX, targetY, targetWidth, targetHeight);
"To measure is to know" as the saying goes. Try both methods and see what works.
Drawing each image separately
Lots of detail in your images.
Fast artistic pipeline. Adding a new image doens't take much time, because it's just an image in a folder.
Grouping can reduce image swapping. If your trees all use
tree1.png, make a
TreeGroup that attaches that image and renders all your trees.
Easy to go over budget. Your images might be too large for your game and fixing it might take too much time.
Image swapping. Constantly swapping out images can reduce framerate significantly.
A texture atlas is a large texture that contains all smaller textures used in (a section of) the game.
Less detailed images. Everything has to fit in one image, so each image won't get as much space.
Less artistic flexibility. It's hard for artists to fit all those images on a single large image.
Most likely you'll end up with a combination of the two techniques: a texture atlas for small, static objects and high-resolution images for your dynamic objects.