<canvas id="canvas"></canvas>
    

const textLines = [
  'Lorem ipsum dolor sit amet, consectetur',
  'adipisicing elit. Sint asperiores deleniti aut,',
  'architecto, necessitatibus illo consequuntur',
  'omnis dignissimos distinctio fugiat possimus.',
  'Ipsum debitis totam vel.',
  'Alias porro numquam itaque doloremque.',
]

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
let width = canvas.clientWidth;
let height = canvas.clientHeight;

const offscreenCanvas = document.createElement('canvas');
const offscreenCtx = offscreenCanvas.getContext('2d');

const lineHeight = 18;
offscreenCtx.font = '700 14px sans-serif';
for (let i = 0; i < textLines.length; i++) {
  const line = textLines[i];
  offscreenCtx.fillText(line, 0, lineHeight * (i + 1));
}

const fragments = 10;
const fragmentShift = lineHeight / 3;

for (let i = 0; i < fragments; i++) {
  const sWidth = width / fragments;
  const sHeight = height;
  const sx = i * sWidth;
  const sy = 0;
  const dy = sy + ((i % 2) ? fragmentShift : 0);
  
  ctx.drawImage(offscreenCanvas, sx, sy, sWidth, sHeight, sx, dy, sWidth, sHeight);
}