let pattern = createPattern(imageObject,repeat);

Creates a reusable pattern (object).

The object can be assigned to any strokeStyle and/or fillStyle.

Then stroke() or fill() will paint the Path with the pattern of the object.

Arguments:

• imageObject is an image that will be used as a pattern. The source of the image can be:
• HTMLImageElement — a img element or a new Image(),
• HTMLCanvasElement — a canvas element,
• HTMLVideoElement — a video element (will grab the current video frame)
• ImageBitmap,
• Blob.
• repeat determines how the imageObject will be repeated across the canvas (much like a CSS background). This argument must be quote delimited and valid values are:
• “repeat” — the pattern will horizontally & vertically fill the canvas
• “repeat-x” — the pattern will only repeat horizontally (1 horizontal row)
• “repeat-y” — the pattern will only repeat vertically (1 vertical row)
• “repeat none” — the pattern appears only once (on the top left)

The pattern object is an object that you can use (and reuse!) to make your path strokes and fills become patterned.

Side Note: The pattern object is not internal to the Canvas element nor it’s Context. It is a separate and reusable JavaScript object that you can assign to any Path you desire. You can even use this object to apply pattern to a Path on a different Canvas element(!)

Important hint about Canvas patterns!

When you create a pattern object, the entire canvas is “invisibly” filled with that pattern (subject to the repeat argument).