Background

Code

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();
}

Demo

ShuffleShuffle GridShuffle ColumnsSolve