JCanvas: How do I get the size of an Image?

Question

I have drawn an image like this:

$("canvas").drawImage({
        x: 0,
        y: 0,
        source: src,
        draggable: true,
        layer: true,
        name: "image",
        fromCenter: false,
    }
});

The image shows as it should. It is larger than the screen and I want to draw a much smaller rect (by the factor of .05) the sides of which are proportionate to the original image. How do I retrieve width and height of the above image?

I tried:

var imageWidth = $("canvas").getLayer("image").width;
var imageHeight = $("canvas").getLayer("image").height;

But alert($("canvas").getLayer("image").width); returns null. I also tried:

var imageWidth = $("canvas").getCanvasImage.width;
var imageHeight = $("canvas").getCanvasImage.height;

But alert($("canvas").getCanvasImage.width); returns undefined.

I don't know this library, but playing a bit with their playground, it seems you can retrieve it under the `load` event parameter, if no width and height options were set, under the sWidth and sHeight properties of the passed parameter. Sounds weird it disappears when you set width and height options though, I probably won't go further into this library ;-) — Kaiido, Dec 01 '16 at 07:52
Ps: Here is the link to the [playground I used](http://projects.calebevans.me/jcanvas/sandbox/?code=Ly8gRnVuY3Rpb24gZm9yIGRyYXdpbmcgYW4gYXJjCmZ1bmN0aW9uIGFyYyhlKSB7CiAgY29uc29sZS5sb2coZS5zV2lkdGgsIGUuc0hlaWdodCk7CiAgJCgnY2FudmFzJykuZHJhd0FyYyh7CiAgICBzdHJva2VTdHlsZTogJyM2ZjknLAogICAgc3Ryb2tlV2lkdGg6IDQsCiAgICB4OiAxNTUsIHk6IDE1NSwKICAgIHJhZGl1czogNDAKICB9KTsKfQoKLy8gUnVuIHRoZSBhcmMoKSBmdW5jdGlvbiBhZnRlciB0aGUgaW1hZ2UgaGFzIGxvYWRlZAokKCdjYW52YXMnKS5kcmF3SW1hZ2UoewogIHNvdXJjZTogJ2ltYWdlcy9sYWR5YnVnLmpwZycsCiAgeDogMTUwLCB5OiAxNTAsCiAgbG9hZDogYXJjCn0pOw==) — Kaiido, Dec 01 '16 at 07:53
Yes, you are right. I have to wait for the loading of the image to finish, before I can retrieve its properties. Thank you! — kalabalik, Dec 01 '16 at 09:03

score 0 · Answer 1 · edited Dec 01 '16 at 08:54

0

You can use below statement to get height and width of canvas image

var imageWidth = $("canvas").width();
var imageHeight = $("canvas").height();

edited Dec 01 '16 at 08:54

Sibeesh Venu

18,755
12
103
140

answered Dec 01 '16 at 08:04

Ranjeet

3
2

this will return the computed width and height of the canvas element, not the ones of the image – Kaiido Dec 01 '16 at 08:10

JCanvas: How do I get the size of an Image?

1 Answers1