# How to improve my graphics on HTML5 canvas?

I am making my own army fighting simulator. Designer have made an 3D model with Blender and textured it, made animations. I have made sprites from that model and did programming. But the result is not as good as I expected. You can look at armyfight.com/simulator.html (refresh until it loads all images properly if it didn't at first time) and when you maximally maximize, you can see there are units moving. But I want to be them clearly visible, with details, high resolution like in flash-games and also that when they are really small units, would be understandable.

Is it possible on canvas?

Or it is my mistake and I must do somehow more HD sprites? I'm stuck now, and I don't know to improve the graphics..

• Could you upload some screenshots or something, we have no way to help you now as we don't see anything. (Please don't link to an external resource, and please edit the post.) – Vaillancourt Apr 12 '16 at 19:55
• Added a screenshot. Seeing on it, it is hard to see an unit there, some blurred or so, bad graphics. Is it possible somehow to make much cleaner grapics? – mansim Apr 12 '16 at 20:44
• Depends on your base graphics... maybe you could upload the base texture as well? – Vaillancourt Apr 12 '16 at 20:46
• I added the sprite from closer. But on HTML5 canvas it minimizes a lot and grapics so much reduces. – mansim Apr 13 '16 at 4:53
• Tried making it bigger? Hiw big is the original texture. – Bálint Apr 13 '16 at 5:51

Just draw them larger. Also don't hesitate to have the sprites overlap vertically. The sprites are rendered from a 45° angle, so it is just natural that the soldiers in the front-row overlap the lower bodies of the soldiers in the row behind them. All you need to keep in mind in that case is that you need to draw them in the correct order from back to front.

The scale of the drawn image is controlled by the last two arguments to the function context2d.drawImage. Make them equal to the 4th and 5th argument to keep source-resolution and target-resolution the same. In your case you are controlling these with the variable 'unit_width'.

Another thing which can affect the scale of images (in fact the scale of the whole canvas) is the global transform setting of the canvas context , which can be changed with context2d.transform, context2d.SetTransform or context2d.scale. There is a huge blob of minified Javascript code in the beginning of your sourcecode which includes the string "transform" a few times, so it might also affect the scaling of the canvas somehow.

• Yes, larger and overlapping vertically looks really much better. Going to improve it with source-resolution. Maybe have any idea how/where should i make my big images (from blender generated) to clearly seen really small images? I mean how to make the picture 100 times smaller and keep really good resolution, i need some tutorial or program. because i am new to gimp2, did sprites with it, but at small images resolution is really bad. – mansim Apr 14 '16 at 9:38
• @mansim When you want to downscale a graphic but retain the detail, then just scaling it automatically often won't do. Many games exaggerate the proportions when using very small sprites. – Philipp Apr 14 '16 at 10:48