First attempt at HTML5’s canvas and drawImage()

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.

bomb graphic

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.

http://www.wilfscorner.co.uk/sandpit/1/new.php

Advertisements
Post a comment or leave a trackback: Trackback URL.

Comments

  • Jacob Seidelin  On October 15, 2010 at 2:42 pm

    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.

  • MichalBe  On October 15, 2010 at 2:50 pm

    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.

  • markw1970  On October 15, 2010 at 2:53 pm

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

  • Frank  On February 4, 2012 at 2:47 am

    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?

    • markw1970  On February 6, 2012 at 2:24 pm

      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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: