CANVAS canvas is not even in shape?

Question

JavaScript

How to make a canvas canvas (not a circle, not a square, but a smou canvas) of an irregular shape, such as a blot or something like that.
Or you can leave the canvas itself in a square shape, insert a picture there and leave the entire area where there is no picture transparent so that the background of the site can be seen.
The task is as follows:
There is a background of the site, on it a canvas that will be erased, under the erased layer there is some element. The bottom line is that the canvas does not expose the background of the back to itself, but is transparent, and is filled only with an irregularly shaped image. Quarrel that it’s hard to explain, it’s just somehow difficult))
Black is what the canvas puts

Here is the code where I describe a little this whole thing

const canvas = {};

      canvas.node = document.createElement('canvas');
      canvas.context = canvas.node.getContext('2d');
      canvas.node.width = width;
      canvas.node.height = height;

      parent.appendChild(canvas.node);
  
      // if(!canDrawGrid){
      //   return canvas;
      // }

      const base_image = new Image();
      base_image.src = this.imgPath.canvasMask;



      base_image.onload = () => {
        canvas.context.drawImage(base_image, -43, -24);
      }
      
      return canvas;

Answer 1

e.g.
https://codepen.io/anon/pen/BbqzYe
https://bennettfeely.com/clippy/