Puzzle image is zoomed in

[ghost]

Describe the bug
When I load an image as a background and then try to make a puzzle from it, the image in the puzzle is zoomed in a lot.

The code for the puzzle:

window.headbreaker = headbreaker;

            let width  = this.$refs.puzzleContainer.offsetWidth,
                height = (this.$refs.puzzleContainer.offsetWidth / element.target.width) * element.target.height;

            const puzzle = new headbreaker.Canvas('puzzle', {
                width: width,
                height: height,
                //pieceSize: this.pieceSize,
                pieceSize: width / this.pieces.horizontal,
                outline: new headbreaker.outline.Rounded(),
                structure: {
                    right: headbreaker.Slot,
                    left: headbreaker.Slot
                },
                proximity: 25,
                borderFill: 0,
                strokeWidth: 2,
                lineSoftness: 0.12,
                image: element.target,
                // optional, but it must be set in order to activate image scaling
                maxPiecesCount: {
                    x: 5,
                    y: 5,
                },
                preventOffstageDrag: true,
                fixed: true,
            });

            // if (imageElement.target.naturalWidth < imageElement.target.naturalHeight) {
            //     puzzle.adjustImagesToPuzzleHeight();
            // } else if (imageElement.target.naturalWidth > imageElement.target.naturalHeight) {
            //     puzzle.adjustImagesToPuzzleWidth();
            // }

            puzzle.autogenerate({
                horizontalPiecesCount: Math.floor(this.pieces.horizontal),
                verticalPiecesCount: Math.floor(this.pieces.vertical),
            });
            puzzle.shuffle(0.7);

            /**
             * Make canvas focusable and listen
             * to ctrl and shift keys in order to force
             * pieces to be dragged individually or as a whole,
             * respectively
             */
            puzzle.registerKeyboardGestures();
            puzzle.draw();
            puzzle.attachSolvedValidator();

            puzzle.onValid(() => {
                this.stopTimer();
                this.$emit('puzzle-solved', this.timer);
            })

The HTML:

<img v-if="underlay"
             @load="createPuzzle"
             id="puzzle-underlay"
             :src="image"/>

        <div id="puzzle"
             ref="puzzle"></div>

I made it in vue, everything else is working as expected, just I don't get why the image zoomed in so much.

[flbulgarelli]

👋 Hi @thatsalltheyare! Could you please provide a working codepen or similar link?