When a sphere falls I would like to put images inside but it doesn't work with the fillStyle render I can only color, now with sprite I can but they don't fit the circle unless the image is rounded, how could I round the image with javascript and matter.js
the code:
return Matter.Bodies.circle(280, 40, 11, {
restitution: 0.5,
render: {
// fillStyle: '#F00',
// strokeStyle: 'black',
// lineWidth: 3,
sprite: {
texture: img,
xScale: 0.3,
yScale: 0.3,
}
}
});
img get square images from ticktok, which I don't know how to make the round
I'm not 100% sure, if this is the best way to do it (for your use case), but you just could:
create a helper canvas Element:
<canvas id='helper-canvas'></canvas>
or let canvas = document.createElement('canvas');
set the width/height of the canvas (width = desired texture width)
...
canvas.width='100';
canvas.height='100';
...
draw the image onto a canvas element(using the context).
...
ctx.drawImage(img, 0, 0); // "img" is a HtmlImageElement
...
set composite-mode and draw a circle that should have the desired size
...
ctx.globalCompositeOperation='destination-in';
ctx.beginPath();
ctx.arc(img.width/2,img.width/2,img.width/2,0,Math.PI*2);
ctx.closePath();
ctx.fill();
...
generate the url of the new "create image"
...
let imgUrl = img.toDataURL('image/png');
...
And than simply create the matter-body, with that new image:
Matter.Bodies.circle(280, 40, 11, {
restitution: 0.5,
render: {
sprite: {
texture: imgUrl,
xScale: 0.3,
yScale: 0.3,
}
}
});