Scaling a 2D static canvas element

scale-canvas.js

function scaleCanvas(canvas, options = {}) {
  const imageData = canvas.toDataURL('image/png');
  const context = canvas.getContext('2d');
  const xScale = options.width !== undefined ? options.width / canvas.width : options.height / canvas.height;
  const yScale = options.height !== undefined ? options.height / canvas.height : options.width / canvas.width;
  const newWidth = Math.round(canvas.width * xScale);
  const newHeight = Math.round(canvas.height * yScale);

  canvas.width = newWidth;
  canvas.newHeight = newHeight;
  canvas.style = '';

  // The image must be redrawn onto the scaled canvas because changing its height clears all the data
  return new Promise((resolve, reject) => {
    const img = new Image;
    img.onload = () => {
      context.drawImage(img, 0, 0, newWidth, newHeight);
      resolve(canvas);
    };
    img.onerror = (err) => {
      reject(err);
    };
    img.src = imageData;
  });
}