[Nexus]

Volonter,
https://codesandbox.io/s/musing-fog-...=/src/index.js

function resizeCanvas(ctx) {
  var canvas = ctx.canvas;
  var img = ctx.getImageData(0, 0, canvas.width, canvas.height);

  canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;

  ctx.putImageData(img, 0, 0);
}

function handleStart(evt) {
  evt.preventDefault();

  startedPainting = true;
  var el = $("#canvas").get(0);

  var needToResize =
    el.width !== el.offsetWidth || el.height !== el.offsetHeight;

  var ctx = el.getContext("2d");
  if (needToResize) {
    resizeCanvas(ctx);
  }

  ctx.lineWidth = 3;
  var touches = evt.changedTouches;

  if (touches) {
    ctx.moveTo(
      touches[0].pageX - el.offsetLeft,
      touches[0].pageY - el.offsetTop
    );
    for (var i = 0; i < touches.length; i++) {
      ctx.lineTo(
        touches[i].pageX - el.offsetLeft,
        touches[i].pageY - el.offsetTop
      );
    }
  } else {
    ctx.moveTo(evt.pageX - el.offsetLeft, evt.pageY - el.offsetTop);
    ctx.lineTo(evt.pageX - el.offsetLeft, evt.pageY - el.offsetTop);
  }
  ctx.stroke();
}

При изменении свойств размеров холста он очищается. Чтобы избежать потери данных я попытался сохранить всё намалеванное с помощью метода getImagaData до изменений размера и отрисовать эти данные после.
Получилось, НО при изменении уменьшении ширины холста данные, которые были у правого края будут утеряны.

Как это пофиксить - я не знаю, возможно вам подскажет кто-нибудь другой, либо вы сами решите эту проблему.
touches я не трогал.