HTML canvas createPattern() Method

Example

function myFunction(x) {
  let c = document.getElementById("myCanvas");
  let ctx = c.getContext("2d");
  ctx.clearRect(0, 0, c.width, c.height);
  
  let img = document.getElementById("demo")
  let pat = ctx.createPattern(img, x);
  
  ctx.rect(0, 0, 150, 150);
  ctx.fillStyle = pat;
  ctx.fill();
}

Try this code ❯

Meaning

The createPattern() method repeats a specified element in the specified direction.

Standard Syntax

JavaScript syntax:

context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

Parameter Values

Parameter	Description
image	Specifies the image, canvas, or video element of the pattern to use.
repeat	Default. Specifies the pattern repeats both horizontally and vertically.
repeat-x	Specifies the pattern repeats only horizontally.
repeat-y	Specifies the pattern repeats only vertically.
no-repeat	Specifies the pattern will be displayed only once (no repeat).