HTML canvas createPattern() Method

❮ HTML canvas Reference


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;


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

Standard Syntax

JavaScript syntax:


Browser Support


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