### Install Headbreaker and Konva

Source: https://github.com/flbulgarelli/headbreaker/blob/master/README.md

Installs the headbreaker package using npm. It also shows how to optionally install Konva.js if you plan to use it as a rendering backend.

```bash
npm install --save headbreaker

# optional: manually add konva to your project if you want to use
# it as rendering backend
npm install --save konva
```

--------------------------------

### Headbreaker Development Commands

Source: https://github.com/flbulgarelli/headbreaker/blob/master/README.md

Provides essential commands for developing and testing the Headbreaker project. Includes instructions for installation, running tests, building, and serving documentation locally.

```bash
# install project
$ npm install
# run tests
$ npm run test
# build whole project
$ npm run all
# start docs site locally
# requires mkdocs
$ mkdocs serve
```

--------------------------------

### Basic Canvas Initialization and Piece Sketching in JavaScript

Source: https://github.com/flbulgarelli/headbreaker/blob/master/docs/index.md

Initializes a Headbreaker canvas with basic settings and sketches multiple puzzle pieces with defined structures and metadata. Requires the headbreaker.js library.

```javascript
const basic = new headbreaker.Canvas('basic-canvas', { width: 500, height: 300, pieceSize: 50, proximity: 10 });
basic.sketchPiece({
  structure: { right: headbreaker.Tab, down: headbreaker.Tab, left: headbreaker.Slot },
  metadata: { id: 'a', currentPosition: { x: 50, y: 50 }, color: '#B87D32' }
});
basic.sketchPiece({
  structure: { up: headbreaker.Slot, right: headbreaker.Tab, down: headbreaker.Tab, left: headbreaker.Slot },
  metadata: { id: 'b', currentPosition: { x: 100, y: 50 }, color: '#B83361' }
});
basic.sketchPiece({
  structure: { up: headbreaker.Slot, right: headbreaker.Tab, down: headbreaker.Slot, left: headbreaker.Tab },
  metadata: { id: 'g', currentPosition: { x: 100, y: 230 } }
});
// ... more pieces ...
basic.draw();.
```

--------------------------------

### Create Keyboard Puzzle with Image and Controls

Source: https://github.com/flbulgarelli/headbreaker/blob/master/docs/index.md

Initializes a Headbreaker puzzle using an image, generates pieces with random inserts, and registers keyboard gestures for individual or group piece movement. It also sets up event listeners for shuffle and solve buttons.

```javascript
let amaral = new Image();
amaral.src = 'static/amaral.jpg';
amaral.onload = () => {
  const keyboard = new headbreaker.Canvas('keyboard-canvas', {
    width: 800, height: 650, pieceSize: 60,
    image: amaral, strokeWidth: 2.5, strokeColor: '#F0F0F0',
    outline: new headbreaker.outline.Rounded()
  });

  keyboard.adjustImagesToPuzzleWidth();
  keyboard.autogenerate({
    horizontalPiecesCount: 6,
    verticalPiecesCount: 7,
    insertsGenerator: headbreaker.generators.random
  });

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

  registerButtons('keyboard', keyboard);
}
```

--------------------------------

### Create Responsive Jigsaw Puzzle

Source: https://github.com/flbulgarelli/headbreaker/blob/master/docs/index.md

Sets up a responsive Headbreaker jigsaw puzzle that adjusts its size and scale based on the container's width. Event listeners are attached for 'resize' and 'DOMContentLoaded' to ensure proper rendering across different screen sizes.

```javascript
const initialWidth = 800;
const responsive = new headbreaker.Canvas('responsive-canvas', {
  width: 800, height: 650,
  pieceSize: 100, proximity: 20,
  borderFill: 10, strokeWidth: 1.5,
  lineSoftness: 0.18,
});

responsive.autogenerate({
  horizontalPiecesCount: 3,
  verticalPiecesCount: 3,
  metadata: [
    {color: '#6F04C7'}, {color: '#0498D1'}, {color: '#16BA0D'},
    {color: '#000000'}, {color: '#6F04C7'}, {color: '#0498D1'},
    {color: '#16BA0D'}, {color: '#000000'}, {color: '#6F04C7'},
  ]
});
responsive.draw();

['resize', 'DOMContentLoaded'].forEach((event) => {
  window.addEventListener(event, () => {
    var container = document.getElementById('responsive-canvas');
    responsive.resize(container.offsetWidth, container.scrollHeight);
    responsive.scale(container.offsetWidth / initialWidth);
    responsive.redraw();
  });
});
```

--------------------------------

### Implement Persistent Puzzle with Export/Import Functionality

Source: https://github.com/flbulgarelli/headbreaker/blob/master/docs/index.md

Sets up a Headbreaker puzzle with persistence features, allowing users to export the current puzzle state to a textarea and import it back. It also includes buttons for shuffling and solving.

```javascript
const exportArea = document.getElementById('export-area');

function readDump() {
  return JSON.parse(exportArea.value);
}

function writeDump(dump) {
  exportArea.value = JSON.stringify(dump, null, 2);
}

const persistent = new headbreaker.Canvas('persistent-canvas', { width: 500, height: 400, strokeWidth: 0, borderFill: 4 });
persistent.autogenerate({metadata: [
  {color: '#6F04C7'}, {color: '#0498D1'}, {color: '#16BA0D'}, {color: '#D1A704'}, {color: '#C72C07'},
  {color: '#000000'}, {color: '#6F04C7'}, {color: '#0498D1'}, {color: '#16BA0D'}, {color: '#D1A704'},
  {color: '#C72C07'}, {color: '#000000'}, {color: '#6F04C7'}, {color: '#0498D1'}, {color: '#16BA0D'},
  {color: '#D1A704'}, {color: '#C72C07'}, {color: '#000000'}, {color: '#6F04C7'}, {color: '#0498D1'},
  {color: '#16BA0D'}, {color: '#D1A704'}, {color: '#C72C07'}, {color: '#000000'}, {color: '#6F04C7'}
]});
persistent.draw();

document.getElementById('persistent-import').addEventListener('click', function() {
  persistent.clear();
  persistent.renderPuzzle(headbreaker.Puzzle.import(readDump()));
  persistent.draw();
});

document.getElementById('persistent-export').addEventListener('click', function() {
  writeDump(persistent.puzzle.export({compact: true}));
});

```

--------------------------------

### Vue Headbreaker Puzzle Integration

Source: https://github.com/flbulgarelli/headbreaker/blob/master/README.md

Demonstrates integrating Headbreaker with a Vue.js application. It uses the `mounted` hook to initialize the puzzle and renders it within a Vue template.

```vue
<template>
  <div id="app">
    <div>Headbreaker from Vue</div>
    <div id="puzzle"></div>
  </div>
</template>

<script>
import headbreaker from 'headbreaker';

const drawPuzzle = () => {
  const autogen = new headbreaker.Canvas('puzzle', {
    width: 800,
    height: 650,
    pieceSize: 100,
    proximity: 20,
    borderFill: 10,
    strokeWidth: 2,
    lineSoftness: 0.18,
    painter: new headbreaker.painters.Konva(),
  });

  autogen.autogenerate({
    horizontalPiecesCount: 2,
    verticalPiecesCount: 2,
    metadata: [
      { color: '#B83361' },
      { color: '#B87D32' },
      { color: '#A4C234' },
      { color: '#37AB8C' },
    ],
  });

  autogen.draw();
};

export default {
  mounted() {
    drawPuzzle()
  },
};
</script>
```

--------------------------------

### Perfect Match Canvas Configuration in JavaScript

Source: https://github.com/flbulgarelli/headbreaker/blob/master/docs/index.md

Sets up a Headbreaker canvas with parameters for achieving a 'perfect match' effect, including precise borders, stroke width, and zero line softness. Pieces are defined with target positions for accurate alignment.

```javascript
const perfect = new headbreaker.Canvas('perfect-canvas', {
  width: 800, height: 300,
  pieceSize: 100, proximity: 20,
  borderFill: 10,
  strokeWidth: 2, strokeColor: '#00200B',
  lineSoftness: 0.0
});

perfect.sketchPiece({
  structure: { right: headbreaker.Tab, down: headbreaker.Slot },
  metadata: { id: 'a', targetPosition: { x: 100, y: 100 }, color: '#0EC430' }
});
perfect.sketchPiece({
  structure: { right: headbreaker.Slot, left: headbreaker.Slot },
  metadata: { id: 'b', targetPosition: { x: 200, y: 100 }, color: '#098520' }
});
perfect.sketchPiece({
  structure: { down: headbreaker.Tab, left: headbreaker.Tab },
  metadata: { id: 'c', targetPosition: { x: 330, y: 80 }, color: '#04380D' }
});
// ... more pieces ...
perfect.draw();
```

--------------------------------

### HTML Puzzle with Image using Canvas API

Source: https://github.com/flbulgarelli/headbreaker/blob/master/README.md

Demonstrates creating a jigsaw puzzle from an image using the headbreaker Canvas API. It loads an image, initializes the canvas with the image, autogenerates the puzzle, shuffles it, and then draws it.

```html
<!-- just add a div with an id... -->
<div id="my-canvas">
</div>

<script>
  // ...and a script with the following code:
  let dali = new Image();
  dali.src = 'static/dali.jpg';
  dali.onload = () => {
    const canvas = new headbreaker.Canvas('my-canvas', {
      width: 800, height: 800, image: dali
    });
    canvas.autogenerate();
    canvas.shuffle(0.7);
    canvas.draw();
  }
</script>
```

--------------------------------

### Headbreaker Puzzle Manipulation (Node.js)

Source: https://github.com/flbulgarelli/headbreaker/blob/master/README.md

Demonstrates the core functionalities of the Headbreaker Puzzle object in a Node.js environment. Covers puzzle creation, piece manipulation, connection logic, and export/import.

```javascript
const headbreaker = require('headbreaker');

// Create a puzzle
const puzzle = new headbreaker.Puzzle();
puzzle
  .newPiece({right: Tab})
  .locateAt(0, 0);
puzzle
  .newPiece({left: Slot, right: Tab})
  .locateAt(3, 0);
puzzle
  .newPiece({left: Slot, right: Tab, down: Slot})
  .locateAt(6, 0);
puzzle
  .newPiece({up: Tab})
  .locateAt(6, 3);

// Connect puzzle's nearby pieces
puzzle.autoconnect();

// Translate puzzle
puzzle.translate(10, 10);

// Shuffle pieces
puzzle.shuffle(100, 100);

// Relocate pieces to fit into a bounding box
// while preserving their relative positions, if possible
puzzle.reframe(vector(0, 0), vector(20, 20));

// Directly manipulate pieces
const [a, b, c, d] = puzzle.pieces;

// Drag a piece 10 steps right and 5 steps down
a.drag(10, 5);

// Connect two pieces (if possible)
a.tryConnectWith(b);

// Add custom metadata to pieces
a.metadata.flavour = "chocolate";
a.metadata.sugar = true;
b.metadata.flavour = "chocolate";
b.metadata.sugar = false;

c.metadata.flavour = "vainilla";
c.metadata.sugar = false;
d.metadata.flavour = "vainilla";
d.metadata.sugar = true;

// Require pieces to match a given condition in
// order to be connected
puzzle.attachConnectionRequirement((one, other) => one.metadata.flavour === other.metadata.flavour);

// Alternatively, set individual requirements for horizontal
// and vertical connections
puzzle.attachVerticalConnectionRequirement((one, other) => one.metadata.flavour === other.metadata.flavour);
puzzle.attachHorizontalConnectionRequirement((one, other) => one.metadata.sugar !== other.metadata.sugar);

// Remove all - vertical and horizontal - connection requirements
puzzle.clearConnectionRequirements();

// Export and import puzzle
const dump = puzzle.export();
const otherPuzzle = headbreaker.Puzzle.import(dump);
```

--------------------------------

### React Headbreaker Puzzle Integration

Source: https://github.com/flbulgarelli/headbreaker/blob/master/README.md

Shows how to integrate Headbreaker into a React application using functional components and hooks. It utilizes `useEffect` for initialization and `useRef` for DOM element access.

```jsx
import { Canvas, painters } from 'headbreaker';
import { useEffect, useRef } from 'react';


function DemoPuzzle({ id }) {
  const puzzleRef = useRef(null)


  useEffect(() => {
    const puzzle = puzzleRef.current
    const canvas = new Canvas(puzzle.id, {
      width: 800, height: 650,
      pieceSize: 100, proximity: 20,
      borderFill: 10, strokeWidth: 2, lineSoftness: 0.18,
      painter: new painters.Konva() // <-- this is important. See https://github.com/flbulgarelli/headbreaker/issues/51
    });

    canvas.autogenerate({
      horizontalPiecesCount: 2,
      verticalPiecesCount: 2,
      metadata: [
        { color: '#B83361' },
        { color: '#B87D32' },
        { color: '#A4C234' },
        { color: '#37AB8C' }
      ]
    });

    canvas.draw();
  }, [])

  return <div ref={puzzleRef} id={id}></div>
}

export default function Home() {
  return (
    <main>
      <h1>Headbreaker From React</h1>
      <DemoPuzzle id="puzzle" />
    </main>
  )
}
```

--------------------------------

### Create and Validate Jigsaw Puzzle with Image

Source: https://github.com/flbulgarelli/headbreaker/blob/master/docs/index.md

Initializes a Headbreaker jigsaw puzzle with a specified image, automatically generates pieces, and attaches a validator for completion. It also includes logic to display an overlay upon successful puzzle completion.

```javascript
let pettoruti = new Image();
pettoruti.src = 'static/pettoruti.jpg';
pettoruti.onload = () => {
  const validated = new headbreaker.Canvas('validated-canvas', {
    width: 800, height: 900,
    pieceSize: 80, proximity: 18,
    borderFill: 8, strokeWidth: 1.5,
    lineSoftness: 0.18, image: pettoruti,
    // used to stick canvas to its current position
    fixed: true
  });
  validated.autogenerate({
    horizontalPiecesCount: 5,
    verticalPiecesCount: 8
  });
  validated.puzzle.pieces[4].translate(63, -56);
  validated.draw();
  validated.attachSolvedValidator();
  validated.onValid(() => {
    setTimeout(() => {
      document.getElementById('validated-canvas-overlay').setAttribute("class", "active");
    }, 1500);
  })
}
```

--------------------------------

### Jigsaw Puzzle with Sound and Visual Feedback in JavaScript

Source: https://github.com/flbulgarelli/headbreaker/blob/master/docs/index.md

Implements sound and visual feedback for piece connections in a jigsaw puzzle. An audio file is played on connection and disconnection. Visual feedback is provided by changing border colors of connected pieces temporarily. It uses the headbreaker library to manage the puzzle.

```javascript
var audio = new Audio('static/connect.wav');
let berni = new Image();
berni.src = 'static/berni.jpg';
berni.onload = () => {
  const sound = new headbreaker.Canvas('sound-canvas', {
    width: 800, height: 650,
    pieceSize: 100, proximity: 20,
    borderFill: 10, strokeWidth: 1.5,
    lineSoftness: 0.18, image: berni,
    strokeColor: 'black'
  });

  sound.adjustImagesToPuzzleHeight();
  sound.autogenerate({
    horizontalPiecesCount: 6,
    insertsGenerator: headbreaker.generators.random
  });

  sound.draw();

  sound.onConnect((_piece, figure, _target, targetFigure) => {
    // play sound
    audio.play();

    // paint borders on click
    // of conecting and conected figures
    figure.shape.stroke('yellow');
    targetFigure.shape.stroke('yellow');
    sound.redraw();

    setTimeout(() => {
      // restore border colors
      // later
      figure.shape.stroke('black');
      targetFigure.shape.stroke('black');
      sound.redraw();
    }, 200);
  });

  sound.onDisconnect((it) => {
    audio.play();
  });
}
```

--------------------------------

### Basic 2x2 Puzzle with Canvas API

Source: https://github.com/flbulgarelli/headbreaker/blob/master/README.md

Creates a simple 2x2 jigsaw puzzle using the headbreaker Canvas API. It defines puzzle properties like dimensions and piece size, then autogenerates the puzzle with specified colors.

```html
<script src="https://flbulgarelli.github.io/headbreaker/js/headbreaker.js"></script>
<body>
  <div id="puzzle"></div>
  <script>
    const autogen = new headbreaker.Canvas('puzzle', {
      width: 800, height: 650,
      pieceSize: 100, proximity: 20,
      borderFill: 10, strokeWidth: 2, lineSoftness: 0.18,
    });
    autogen.autogenerate({
      horizontalPiecesCount: 2,
      verticalPiecesCount: 2,
      metadata: [
        {color: '#B83361'},
        {color: '#B87D32'},
        {color: '#A4C234'},
        {color: '#37AB8C'}
      ]
    });
    autogen.draw();
  </script>
</body>
```

--------------------------------

### Create Dynamic Puzzle with Labeled Pieces and Connection Events

Source: https://github.com/flbulgarelli/headbreaker/blob/master/docs/index.md

Defines a dynamic Headbreaker puzzle with custom templates for pieces, including labels and colors. It handles piece connections and disconnections to update the labels and redraws the canvas.

```javascript
function updateLabel(piece, figure, delta) {
  piece.metadata.label.text = Number(piece.metadata.label.text) + delta;
  figure.label.text(piece.metadata.label.text);
}

const dynamic = new headbreaker.Canvas('dynamic-canvas', { width: 700, height: 700, pieceSize: 100, proximity: 20,  borderFill: 10, lineSoftness: 0.2, strokeWidth: 0 });
dynamic.defineTemplate('A', {
  structure: 'TTSS', metadata: { label: { text: '0', x: 22 }, color: '#DB7BBF' }
});
dynamic.defineTemplate('B', {
  structure: 'TTTT', metadata: { label: { text: '0', x: 22 }, color: '#438D8F' }
});
dynamic.defineTemplate('C', {
  structure: 'SSSS', metadata: { label: { text: '0', x: 22 }, color: '#DBC967' }
});
// ... more templates ...

dynamic.sketchPieceUsingTemplate('a', 'A');
dynamic.sketchPieceUsingTemplate('b', 'A');
dynamic.sketchPieceUsingTemplate('c', 'B');
dynamic.sketchPieceUsingTemplate('d', 'C');
dynamic.sketchPieceUsingTemplate('e', 'C');
dynamic.sketchPieceUsingTemplate('f', 'D');
dynamic.sketchPieceUsingTemplate('g', 'E');
dynamic.shuffle(0.7);
dynamic.onConnect((piece, figure, target, targetFigure) => {
  updateLabel(piece, figure, 1);
  updateLabel(target, targetFigure, 1);
  dynamic.redraw();
});
dynamic.onDisconnect((piece, figure, target, targetFigure) => {
  updateLabel(piece, figure, -1);
  updateLabel(target, targetFigure, -1);
  dynamic.redraw();
});
dynamic.draw();

```

--------------------------------

### Create Rectangular Jigsaw Puzzle with Custom Piece Size

Source: https://github.com/flbulgarelli/headbreaker/blob/master/docs/index.md

Initializes a Headbreaker jigsaw puzzle with a specified image and custom rectangular piece dimensions. The 'adjustImagesToPuzzleWidth' method is used to ensure images fit the puzzle's width, followed by puzzle generation and drawing.

```javascript
let quinquela = new Image();
quinquela.src = 'static/quinquela.jpg';
quinquela.onload = () => {
  const rectangular = new headbreaker.Canvas('rectangular-canvas', {
    width: 800, height: 650,
    pieceSize: {x: 200, y: 120}, proximity: 20,
    borderFill: {x: 20, y: 12}, strokeWidth: 1.5,
    lineSoftness: 0.18, image: quinquela
  });

  rectangular.adjustImagesToPuzzleWidth();
  rectangular.autogenerate({
    horizontalPiecesCount: 3,
    verticalPiecesCount: 3
  });
  rectangular.draw();
  registerButtons('rectangular', rectangular);
}
```

--------------------------------

### Autogenerate Jigsaw Puzzle with JavaScript

Source: https://github.com/flbulgarelli/headbreaker/blob/master/docs/index.md

Creates a jigsaw puzzle automatically using the headbreaker library. It initializes a canvas with specified dimensions and image, then autogenerates the puzzle pieces. The generated puzzle can then be drawn and manipulated.

```javascript
let xul = new Image();
xul.src = 'static/xul.jpg';
xul.onload = () => {
  const autogen = new headbreaker.Canvas('autogen-canvas', {
    width: 800, height: 650,
    pieceSize: 100, proximity: 20,
    borderFill: 10, strokeWidth: 1.5,
    lineSoftness: 0.18, image: xul,
  });

  autogen.adjustImagesToPuzzleHeight();
  autogen.autogenerate({
    horizontalPiecesCount: 6,
    verticalPiecesCount: 5
  });
  autogen.draw();
}
```

--------------------------------

### Create Jigsaw Puzzle with Custom Labels in JavaScript

Source: https://github.com/flbulgarelli/headbreaker/blob/master/docs/index.md

Creates a jigsaw puzzle with custom labels on specific pieces. It defines pieces with different structures (Tab, Slot) and metadata including colors and text labels. The puzzle is then shuffled and drawn, with connection requirements defined to link pieces based on their IDs.

```javascript
const labels = new headbreaker.Canvas('labels-canvas', {
  width: 400, height: 400,
  pieceSize: 80, proximity: 25,
  borderFill: 10, strokeWidth: 2,
  lineSoftness: 0.18,
});

labels.sketchPiece({
  structure: { right: headbreaker.Tab },
  metadata: {
    id: 'tree-kanji',
    color: '#23599E',
    strokeColor: '#18396B',
    label: { text: '木', fontSize: 70, x: -5, y: 5 }
  }
});

labels.sketchPiece({
  structure: { left: headbreaker.Slot },
  metadata: {
    id: 'tree-emoji',
    color: '#EBB34B',
    strokeColor: '#695024',
    label: { text: '🌳', fontSize: 70, x: 5, y: 0 }
  }
});

// ... more pieces ...
labels.shuffle(0.6);
labels.draw();
labels.attachConnectionRequirement(
  (one, other) => one.metadata.id.replace('-kanji', '') == other.metadata.id.replace('-emoji', '')
);
```

--------------------------------

### Accessing Puzzle Object from Canvas

Source: https://github.com/flbulgarelli/headbreaker/blob/master/README.md

Shows how to access the underlying puzzle object from a headbreaker Canvas instance. This allows direct interaction with the puzzle's data model after the canvas has been created.

```javascript
// create and configure the canvas
const canvas = new headbreaker.Canvas(...);
// ...

// now you can access and interact with the puzzle object
const puzzle = canvas.puzzle;
```

--------------------------------

### Background Image Puzzle in JavaScript

Source: https://github.com/flbulgarelli/headbreaker/blob/master/docs/index.md

Configures a Headbreaker canvas to use a background image. This involves loading an image, setting canvas properties like `maxPiecesCount` for scaling, and sketching pieces with specific structures and positions.

```javascript
let vangogh = new Image();
vangogh.src = 'static/vangogh.jpg';
vangogh.onload = () => {
  const background = new headbreaker.Canvas('background-canvas', {
    width: 800, height: 650,
    pieceSize: 100, proximity: 20,
    borderFill: 10, strokeWidth: 2,
    lineSoftness: 0.12, image: vangogh,
    // optional, but it must be set in order to activate image scaling
    maxPiecesCount: {x: 5, y: 5}
  });

  background.adjustImagesToPuzzleHeight();
  background.sketchPiece({
    structure: 'TS--',
    metadata: { id: 'a', targetPosition: { x: 100, y: 100 } },
  });
  background.sketchPiece({
    structure: 'SSS-',
    metadata: { id: 'b', targetPosition: { x: 200, y: 100 } },
  });
  // ... more pieces ...
  background.sketchPiece({
    structure: '--TT',
    metadata: { id: 'y', targetPosition: { x: 500, y: 500 }, currentPosition: { x: 570, y: 560 } }
  });
  background.draw()
}
```

--------------------------------

### Randomize Jigsaw Puzzle Piece Positions with JavaScript

Source: https://github.com/flbulgarelli/headbreaker/blob/master/docs/index.md

Initializes a jigsaw puzzle with custom dimensions and an image, then uses a custom `insertsGenerator` for piece arrangement. The puzzle pieces are then shuffled randomly with a specified probability before being drawn.

```javascript
let dali = new Image();
dali.src = 'static/dali.jpg';
dali.onload = () => {
  const randomized = new headbreaker.Canvas('randomized-canvas', {
    width: 800, height: 650,
    pieceSize: 100, proximity: 20,
    borderFill: 10, strokeWidth: 2,
    lineSoftness: 0.18, image: dali
  });
  randomized.autogenerate({
    insertsGenerator: headbreaker.generators.flipflop
  });
  randomized.shuffle(0.7);
  randomized.draw();
}
```

--------------------------------

### Canvas with Rounded Lines in JavaScript

Source: https://github.com/flbulgarelli/headbreaker/blob/master/docs/index.md

Initializes a Headbreaker canvas using a rounded outline style, providing a distinct aesthetic for the puzzle pieces. This requires specifying a `headbreaker.outline.Rounded()` object.

```javascript
const rounded = new headbreaker.Canvas('rounded-canvas', {
  width: 500, height: 300,
  pieceSize: 50,
  outline: new headbreaker.outline.Rounded()
});
rounded.sketchPiece({
  structure: { right: headbreaker.Tab, down: headbreaker.Tab, left: headbreaker.Slot },
  metadata: { id: 'a', currentPosition: { x: 50, y: 50 }, color: '#B87D32' }
});
// ... more pieces ...
rounded.draw();
```

--------------------------------

### Canvas with Soft Lines in JavaScript

Source: https://github.com/flbulgarelli/headbreaker/blob/master/docs/index.md

Creates a Headbreaker canvas with slightly softened lines for a smoother appearance. This configuration influences the visual style of the puzzle pieces.

```javascript
const soft = new headbreaker.Canvas('soft-canvas', {
  width: 500, height: 300,
  pieceSize: 50, proximity: 10,
  lineSoftness: 0.2
});
soft.sketchPiece({
  structure: { right: headbreaker.Tab, down: headbreaker.Tab, left: headbreaker.Slot },
  metadata: { id: 'a', currentPosition: { x: 50, y: 50 }, color: '#B87D32' }
});
// ... more pieces ...
soft.draw();
```

--------------------------------

### Irregular Shaped Puzzle Pieces in JavaScript

Source: https://github.com/flbulgarelli/headbreaker/blob/master/docs/index.md

Creates a Headbreaker canvas designed for irregular puzzle piece shapes. It utilizes `headbreaker.diameter()` to define custom sizes for pieces, offering more flexibility in design.

```javascript
const irregular = new headbreaker.Canvas('irregular-canvas', {
  proximity: 25,
  width: 500, height: 300,
  outline: new headbreaker.outline.Rounded() });
irregular.sketchPiece({
  structure: { right: headbreaker.Slot, left: headbreaker.Slot },
  metadata: { id: 'a', color: '#B87D32' },
  size: headbreaker.diameter({x: 50, y: 50})
});
// ... more pieces ...
irregular.sketchPiece({
  structure: { up: headbreaker.Slot, right: headbreaker.Tab, down: headbreaker.Slot, left: headbreaker.Tab },
  metadata: { id: 'd', color: '#A4C234' },
  size: headbreaker.diameter({x: 100, y: 50})
});
// ... more pieces ...
irregular.sketchPiece({
  structure: { up: headbreaker.Slot, right: headbreaker.Slot, down: headbreaker.Tab, left: headbreaker.Tab },
  metadata: { id: 'g', color: '#B83361' },
  size: headbreaker.diameter({x: 50, y: 100})
});

irregular.draw();
```

--------------------------------

### Prevent Offstage Drag in Jigsaw Puzzle with JavaScript

Source: https://github.com/flbulgarelli/headbreaker/blob/master/docs/index.md

Configures a jigsaw puzzle to prevent pieces from being dragged offstage. This is achieved by setting the `preventOffstageDrag` option to true. The puzzle is initialized with an image and then autogenerated and shuffled.

```javascript
let malharro = new Image();
malharro.src = 'static/malharro.jpg';
malharro.onload = () => {
  const offstage = new headbreaker.Canvas('offstage-canvas', {
    width: 400, height: 400, image: malharro,
    // ... more configs ...
    preventOffstageDrag: true,
    fixed: true
  });

  offstage.adjustImagesToPuzzleHeight();
  offstage.autogenerate({
    horizontalPiecesCount: 3,
    verticalPiecesCount: 3
  });
  offstage.shuffleGrid();
  offstage.draw();
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.