HTML canvas createPattern() Method

❮ HTML canvas Reference

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();
}

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");



Browser Support




Status







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).
❮ HTML canvas Reference