HTML5: Rendering absolute images using canvas
- by Mark
I am experimenting with canvas as part of my HTML5 introduction. This constitutes as assignment work, but I am not asking for any help on the actual coursework at all.
I am trying to write a rendering engine, but having no luck because once the image is drawn on canvas it looks very distorted, and not at the right dimensions of the image itself.
I have made a animation engine that loads images into an array, and then iterates through them at a certain speed. This is not the problem, and I assume is not causing the issue as this was happening when I drawn an image to the canvas.
I think this is natural behaviour for images to be scaled/skewed when the window is resized, so I conquered that by simply redrawing the whole thing once the window is resized.
The images I am using are isometric, and drawn at a pixel level. Would this cause the distortion? It seems setting the dimensions on the drawImage() function are not working are all. I am using JavaScript for the manipulation and rendering of the canvas.
I would normally try and work it out myself, but I do not have any time to ponder why because I have no idea why it is even scaling/skewing the image once it is drawn on the canvas. I cannot share the code for obvious reasons. I should also mention, the canvas's dimension is the total width of the viewport, as I am developing a game.
My question is: Has anyone encountered this and how would I correct it?
Thanks for your help.
