CODEWITHSUNDEEP
canvashtml5-canvas
Hellen Ward
Hellen Ward

Reputation: 1

Can't get image to repeat on Canvas using repeat Pattern

I'm trying to create a simple repeat image on canvas using a graphic I created myself. Unfortunately createPattern(img, repeat) is resulting in only one version of the image being repeated. I've tried saving it as an image and then loading that image using img.src, I've also tried creating a second canvas and tried to draw on that using the first canvas as the basis of the pattern but both are producing the same result - just one version of the image. What am I missing here?

Here are both versions of my code:

Using two canvases: 

function draw() {

  var canvas1 = document.getElementById('drawcanvas')
  var ctx = canvas1.getContext('2d');
  var canvas2 = document.getElementById('canvas');
  var ctx2 = canvas2.getContext('2d');


  ctx.fillStyle = '#f5f2d0';
  ctx.fillRect(0, 0, 205, 255);
  ctx.fillStyle = '#FFF';
  ctx.fillRect(0, 0, 200, 250);
  ctx.fillStyle = '#77d499';
  ctx.fillRect(5, 5, 195, 245);
  var img = new Image();
  img.addEventListener('load', function() {
    ctx.drawImage(img, 48.75, 20, 100, 200)
  }, false)
  img.src = 'Images/wine-icon-15966.png';

  var pattern = ctx2.createPattern(canvas, 'repeat');
  ctx2.fillStyle = pattern;
  ctx.fillRect(0, 0, 2480, 3508);
}

Using a separate image:

function draw() {

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

  ctx.fillStyle = '#f5f2d0';
  ctx.fillRect(0, 0, 2480, 3508);


  ctx.fillStyle = '#FFF';
  ctx.fillRect(0, 0, 200, 250);
  ctx.fillStyle = '#77d499';
  ctx.fillRect(5, 5, 195, 245);
  var img = new Image();
  img.addEventListener('load', function() {
    ctx.drawImage(img, 48.75, 20, 100, 200)
  }, false)
  img.src = 'Images/wine-icon-15966.png';

}

Thanks for your help!

Upvotes: 0

Views: 188

Answers (1)

Hellen Ward
Hellen Ward

Reputation: 1

I did a bit of tweaking and got it working using the draw from canvas option. As suggested, I moved the logic inside the load statement. I'd also referred to canvas in createPattern which is the id of the second canvas rather than the id I'd given the first canvas (drawcanvas) which meant I was essentially drawing a blank canvas onto a blank canvas. Here's my updated code.

function draw() {

  var canvas1 = document.getElementById('drawcanvas')
  var ctx = canvas1.getContext('2d');
  var canvas2 = document.getElementById('canvas');
  var ctx2 = canvas2.getContext('2d');


  ctx.fillStyle = '#f5f2d0';
  ctx.fillRect(0, 0, 205, 255);
  ctx.fillStyle = '#FFF';
  ctx.fillRect(0, 0, 200, 250);
  ctx.fillStyle = '#77d499';
  ctx.fillRect(5, 5, 195, 245);
  var img = new Image();
  img.src = 'Images/wine-icon-15966.png';
    img.addEventListener('load', function() {
    ctx.drawImage(img, 48.75, 20, 100, 200);
    var pattern = ctx2.createPattern(drawcanvas, 'repeat');
    ctx2.fillStyle = pattern;
    ctx2.fillRect(0, 0, canvas.width, canvas.height);
    ctx2.fill();

  }, false);

  ctx2.fillStyle = '#f5f2d0';
  ctx2.fillRect(0, 0, canvas.width, canvas.height);
}

Upvotes: 0

Related Questions