Search code examples
canvasmousescalingmatter.js

Scaling Matter.js canvas breaks mouse drag

My issue is this:

I used Matter.js to create a dragabble object on a canvas. But when I scale the canvas my mouse clicks don't drag the object anymore because the clicks are miscalculated due to scaling. Matter.js still thinks the canvas is not scaled. So I have to click next to the object to actually drag it. And the more I scale the more off I have to go with my click from the object. What do I have to do to correct Matter.js that the canvas has been scaled ?

<body>
    <script>
        let Engine = Matter.Engine,
        Render = Matter.Render,
        World = Matter.World,
        Bodies = Matter.Bodies;

        let engine = Engine.create();
        let render = Render.create({
            element: document.body,
            engine: engine
        });

        Engine.run(engine);
        Render.run(render);
            

        let floor = Bodies.rectangle(0, 500, 600, 10, { isStatic: true });
        let ball = Bodies.circle(200, 10, 40);
        World.add(engine.world, [ball, floor]);


        render.canvas.width = 1000;
        render.canvas.height = 800;

        render.canvas.style.transformOrigin = '0 0';
        render.canvas.style.transform = 'scale(.8)';

        let world = engine.world;
        let Mouse = Matter.Mouse;
        let MouseConstraint = Matter.MouseConstraint;
        let mouse = Mouse.create(render.canvas);
        let mouseConstraint = MouseConstraint.create(engine, { mouse: mouse });
        World.add(world, mouseConstraint);
        render.mouse = mouse;
    </script>
</body>

screenshot

Kind regards, Slawek

Solution

  • Thanks to the ggorlen the answer is:

    Use Matter.Mouse.setScale(mouse, scale);

    There you need to supply the right scale, but how would you know that having only the initial scale you used to scale the canvas? The formula is below:

    set scale(scale){
        
    let mouseScale = 1 + (1 / (scale / (1 - scale)))
        
    this.Mouse.setScale(this.mouse, {x: mouseScale, y: mouseScale});
}