1

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?

Improve this question

3 Answers 3

Reset to default
1

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/

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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

Improve this answer

2 Comments

There will be 5 moving objects and it will be 15 frames per second. I was thinking moving objects can have a different layer on canvas.
Can you post the images? If it's a port from DOS the geometry already exists to draw them, you just need a clever way to decompile / hunt it down.
0

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).

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.