using createPattern() with a canvas

Question

I'm trying to get a repeating canvas pattern. Sadly all examples I could find repeat an image. So i tried this:

function init() {
var canvas = document.getElementById("bg");
var ctx = canvas.getContext("2d");

//creating a new canvas  
var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 400;
var img = canvas.getContext("2d");

draw(img);
var objPattern = ctx.createPattern(img, "repeat");
ctx.fillStyle = objPattern;
ctx.fillRect(0, 0, document.body.clientHeight, document.body.clientWidth);
}

function draw(img) {
  //img.save();
  img.beginPath();
  img.moveTo(0.0, 40.0);
  img.lineTo(26.9, 36.0);
  img.bezierCurveTo(31.7, 36.0, 36.0, 32.1, 36.0, 27.3);
  img.lineTo(40.0, 0.0);
  img.lineTo(11.8, 3.0);
  img.bezierCurveTo(7.0, 3.0, 3.0, 6.9, 3.0, 11.7);
  img.lineTo(0.0, 40.0);
  img.closePath();
  img.fillStyle = "rgb(188, 222, 178)";
  img.fill();
  img.lineWidth = 0.8;
  img.strokeStyle = "rgb(0, 156, 86)";
  img.lineJoin = "miter";
  img.miterLimit = 4.0;
  img.stroke();
  //img.restore();
}

and included it into the html file like this:

<body onload="init()">
<canvas id="bg" width=100%; height=100%;></canvas>
…

I don't really want to use loops to repeat the pattern "by hand" using offsets as i feel(and hope) that there should be an easier approach. The save and restore in the draw code are used in some tutorials and examples, but they don't really make any sense to me, so i commented them out.

Simon Sarris · Accepted Answer · 2021-02-19T15:26:55.437

Anything that takes an image in Canvas can take a Canvas element too.

Here is an example of your drawing code making a pattern, and a custom pattern function in case you want more fine-grained control:

<!-- HTML -->
<canvas id="canvas1" width="500" height="500"></canvas>

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');



// set up a pattern
var pattern = document.createElement('canvas');
pattern.width = 40;
pattern.height = 40;
var pctx = pattern.getContext('2d');

pctx.beginPath();
pctx.moveTo(0.0, 40.0);
pctx.lineTo(26.9, 36.0);
pctx.bezierCurveTo(31.7, 36.0, 36.0, 32.1, 36.0, 27.3);
pctx.lineTo(40.0, 0.0);
pctx.lineTo(11.8, 3.0);
pctx.bezierCurveTo(7.0, 3.0, 3.0, 6.9, 3.0, 11.7);
pctx.lineTo(0.0, 40.0);
pctx.closePath();
pctx.fillStyle = "rgb(188, 222, 178)";
pctx.fill();
pctx.lineWidth = 0.8;
pctx.strokeStyle = "rgb(0, 156, 86)";
pctx.lineJoin = "miter";
pctx.miterLimit = 4.0;
pctx.stroke();

var pattern = ctx.createPattern(pattern, "repeat");
ctx.rect(0,0,200,200);
ctx.fillStyle = pattern;
ctx.fill();

The key thing to note here is that the created canvas is only 40x40 pixels, just large enough to hold the pattern.

http://jsfiddle.net/UxDVR/7/

Please include the relevant parts of the linked code so in case that link goes down your answer doesn't become unusable. — totymedli, Feb 16 '21 at 13:24

score 1 · Answer 2 · answered Apr 27 '12 at 17:24

1

If you want to do this with jcanvas, @Caleb531 just updated version 5.3b using @SimonSarris' link as a model:

http://jsfiddle.net/caleb531/Nxcz8/7/

answered Apr 27 '12 at 17:24

dave_k_smith

655
1
7
22

using createPattern() with a canvas

2 Answers2