2

I'm writing an HTML5 Javascript game that uses the <canvas> tag, and and I'm not sure which is better for a sprite: a <canvas> tag or an Image(). A friend says <canvas>, so that we can play with its colors, make it blink, etc, but I think an Image() will be faster.

I'd like some input on this, since I'm quite clueless.

Actual examples:

I have a little car I want to draw on the screen. Let's say it's a racing game and I want the keyboard to move the car. Should the car be an Image() or a <canvas>.

I have a background landscape to put on the back of my 2D Platformer. Image() or <canvas>?

David Gomes
  • 5,644
  • 16
  • 60
  • 103
  • The speed depends on the implementation of the browser. In some browsers one could be faster, in others the other. – Philipp Dec 19 '12 at 12:23
  • 2
    Also this depends on the needs. – rlemon Dec 19 '12 at 14:34
  • Give us some use cases for your "scenario" and we might be able to provide some help, otherwise this is looking like too general a question to properly answer. Why is performance an issue for you? Are the image rendering times a bottleneck? – rlemon Dec 19 '12 at 14:37

1 Answers1

-3

I will suggest SVG images, they are memory efficient an you can change the color with css. Here some good articles about it:

Using SVG for Flexible, Scalable, and Fun Backgrounds

Can I change the fill color of an svg path with CSS?

Community
  • 1
  • 1
wandarkaf
  • 1,839
  • 20
  • 30
  • 3
    If he was making a vector game maybe I would agree, but hes specifically asking about canvas. It would be like me just suggesting he use Flash or Unity instead. – Loktar Dec 19 '12 at 14:33