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 create an HTML Image object in the JavaScript and assign this image to it’s src attribute.
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.
Comments
You need to set the actual dimensions of the canvas and not just the CSS dimensions. The canvas has an initial size of 300×150, setting the CSS width/height doesn’t change that, it just stretches the canvas. Set [canvas].width and [canvas].height as well and it should be fine.
I;m not sure if that is what you are asking for but check it:
http://jsbin.com/itaki3
It is full of errors coz i wrote it very fast, but seems to work.
Cheers.
Awesome. Guys thank you so much for taking the time to help.
I posted a new page with the correct code.
http://www.wilfscorner.co.uk/sandpit/1/new.php
Onwards.. :)
It seems once the image size and shape and color are set, DrawImage cannot change that. The location can be respecified but not the object’s attributes. Is there a way to change those attributes between draws?
To the best of my knowledge you cannot alter the image using drawImage(). For animation it’s worth employing a sprite sheet and using the lengthy overload for drawImage to target each frame.
drawImage(imgobject,imgx,imgy,frame-width,frame-height,canvasx,canvasy,frame-width,frame-height);
So if you have a sprite sheet with just 2 frames sat side by side @ 32px x 32px per frame (i.e. 64px x 32px image), you could place the 2nd frame on the canvas at 128 x 128 with: context.drawImage(imgobject,32,0,32,32,128,128,32,32);
Hopefully all that is relevant.
p.s. I stopped blogging here some time ago. Please come over to my new blog at http://www.spacemonsters.co.uk :)
Thanks for posting.
Trackbacks
[...] This post was mentioned on Twitter by Andrew Wooldridge, Wilf. Wilf said: First attempts at HTML5 CANVAS and drawImage(): http://bit.ly/aZj9ng [...]