developing html5 canvas game: images or statements

I am porting an old dos game to html 5 canvas. It is a very basic game with animations of 2-3 frames. I have already开发者_开发问答 extracted all the necessary frames which are very low-res and approximately 13*23 images. I can replicate the images by using canvas js statements or I can use the images I already have with drawImage().

The problem with using images is most modern browsers resize images by using interpolation techniques such as bicubic etc. This makes the images loose their dos-like low resolution appearances and they look awful since they have to be scaled as pixel arts.

The problem with using canvas js statements is that is very difficult to replicate all the images by hand but it solves the scaling problem.

What would be the ideal way to do it?

It all depends upon various criteria. There are various strategies to improve the performance of the canvas.

I consider that even though you draw those images yourself, you will have to buffer it to get the performance gain... I would suggest you to use the images.

Still it all depends upon the problem context. Please read the following article, it will give you a fair idea on improving canvas performance.

Reference: http://www.html5rocks.com/en/tutorials/canvas/performance/

I think it depends more on how many objects you'll have moving and what framerate you want. Canvas lacks redraw regions. It'll perform much faster if you do the work to 'draw' the objects.

Relevant

Draw them at their original width and height. They won't be anti-aliased if you draw them at integer-valued coordinates, i.e. (0, 0) rather than (0.5, 3.2).