画布，防止在调整大小时失去进度

Question

我正在为一个简单的应用程序进行练习。

Link to the project, you can test it and you will find the soource in the GitHub's link.

这是一个画布应用，这是我的问题：

每次调整窗口大小时，画布都会调整大小，但同时会丢失用户对其进行的所有操作。

我正在寻找一种方法来防止丢失用户的工作，或者一种保存工作的方法，而不是在新画布中重新绘制它。

有什么想法吗？

谢谢大家。吻。

Answer 1

保持画布的宽度/高度属性相同，但使用CSS更改其大小。

Answer 2

解决方案，即使不完美

这个解决方案并不完美，但它主要适用于时代。 为了获得更好的解决方案，您应该在每次有鼠标事件时跟踪路径，将其保存在数组中，每次调整窗口大小时都会将其加载到新画布上。

HTML

<canvas id="mainCanvas" width="900" height="500"></canvas>

的JavaScript

var $canvas = $("#mainCanvas"); //jquery mainCanvas
var context = $canvas[0].getContext("2d"); //jQuery Context

//function to cloneCanvas
function cloneCanvas(oldCanvas) {
  //create a new canvas
  var newCanvas = document.createElement('canvas');
  var contextCopy = newCanvas.getContext('2d');
  //set dimensions
  newCanvas.width = oldCanvas.width;
  newCanvas.height = oldCanvas.height;
  //apply the old canvas to the new one
  contextCopy.drawImage(oldCanvas, 0, 0);
  //return the new canvas
  return newCanvas;
}

//Function to resizes canvas on window resizing:
  function respondCanvas(){
  //creating a copy of the main canvas
  var copyMainCanvas = cloneCanvas(document.getElementById("mainCanvas"));
  //naming the parent of the mainCanvas
  var $container = $($canvas.parent());
  //Changnig the size of the canvas
  $canvas.prop('width', $container.width());
  $canvas.prop('height', $container.width() / 2);
  //redrawing the canvas resized with the copy just made
  context.drawImage(copyMainCanvas, 0, 0);
}