Question

I have an Image() object, which I need to resize. I am using it to fill a shape in canvas.

If I try to change it like image.width = 300, it doesn’t resize. If I console.log it, it shows that only the html attribute has been changed.

Is there a way to edit the Image() size directly?

Answer 1

You can do this using the setting the fill.scale object with the properties fill.scale.x and fill.scale.y that you wish to apply to your image.

In the example, this could be done, for example like:

var patternPentagon = new Kinetic.RegularPolygon({
   x: 220,
   y: stage.getHeight() / 2,
   sides: 5,
   radius: 70,
   fill: {
       scale: { x:0.5, y:0.5 },
       image: images.darthVader,
       offset: [-220, -70]
   },
   stroke: 'black',
   strokeWidth: 4,
   draggable: true

});

You can see an example of this working here