Allow `width` and `height` parameters in loadImage to support proper SVG scaling.

Increasing Access

Allowing to use an SVG image as source for a canvas image leads to crisper images when a user scales the canvas up.

Most appropriate sub-area of p5.js?

• Image

Feature enhancement details

The method p5.loadImage currently loads the given image in its inherent size. The underlying function drawImage actually allows drawing SVG files smoothly in any size, independent of resolution. It takes width and height arguments to do this. A quick way to make use of this would be to add these arguments to the signature of loadImage and pass them on to the call of drawImage, should they be given. If they are undefined then loadImage can still default to the inherent width and height.

Here is a proof of concept for implementing this:

p5.prototype.loadImage = function(
  path,
  successCallback,
  failureCallback,
  options
) {
  ...
    ...
      } else {
        // Non-GIF Section
        const img = new Image();

        img.onload = () => {
          pImg.width = pImg.canvas.width = options.width
            ? options.width
            : img.width;
          pImg.height = pImg.canvas.height = options.height
            ? options.height
            : img.height;

          // Draw the image into the backing canvas of the p5.Image
          pImg.drawingContext.drawImage(img, 0, 0, pImg.width, pImg.height);
          pImg.modified = true;
          if (typeof successCallback === 'function') {
            successCallback(pImg);
          }
          self._decrementPreload();
        };
        ...
      ...
    ...
  ...
  return pImg;
};

A possible use case would be a presentation with many graphics that should scale from small to large screens. Being able to use SVG files as templates for canvas bitmaps of appropriate size makes scaling presentations much easier, without the performance penalty of actually working with SVG elements.

Start by locating the p5.loadImage entry point and running the existing image-loading tests. Check how SVG and non-SVG images are currently sized, then verify that optional width and height values produce the requested canvas dimensions while omitted values preserve inherent sizing.