My first attempts with the HTML5 <canvas> element are online at www.wilfscorner.co.uk/sandpit/1/.
As you will see I have a scaling problem which I just can’t figure out. Why is it that I should create an image at 64 x 32 that contains two frames but not be able to display them within the canvas at 32 x 32 ?
The effect is as if the image is scaled to x2.
I then pass this image object in to the drawImage method. I use the third override which accepts the following parameters:
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
I took the lead from https://developer.mozilla.org/en/Canvas_tutorial/Using_images.
Can anybody explain why my image appears out of proportion ?
What’s curious (and possibly a starting point for my investigation) is that the canvas, although drawn to 480×480, doesn’t behave as if set to those dimensions. The reason I say this is the code is set to “bounce” the bomb at the canvas edges.
Anyway the code is in the page so right-click and take a look if you get 5 minutes. I’d be grateful for your input.
Update: the solution is to set the width and height attributes of your canvas element. They are by default 300×150. Set them programmatically if you like with canvas.setAttribute(‘width’, canvaswidth); but set they must be.