Question

I’m filling a custom shaped path with an image, with repeat option enabled. I make a drawing, very nice, then with a click from the user I want the position of my shape to change. I clear the context, then draw my path elsewhere, all correct; but the repeating pattern of the image stays the same. When the user makes the click, I call createPattern() again as it’s seen in the code below, but that call doesn’t create a new pattern, it uses the old one. And because I changed the shape’s location, its inside is filled with whatever part of the image was there when I made the initial drawing.

So how can I reset the pattern of the image, so it can correctly start filling the image somewhere else? Is it possible? Would context.translate work? i don’t think translating works, because I already do translate the context before filling.

Here’s the part of the code. The coordinate variables are not important I think:

    updatePicture(){ // called each time the user clicks, and should draw in different positions

...
    context.save();
    context.translate(x, y);
    context.rotate(270 * TO_RADIANS);
    context.scale(scale_cerceve, scale_cerceve);

    context.beginPath();
    context.moveTo(0 - (tablo.height / scale_cerceve) - paspartu_height, 0 - paspartu_height);
    context.lineTo(0 - (tablo.height / scale_cerceve) - cerceve.height - paspartu_height, 0 - cerceve.height - paspartu_height);
    context.lineTo(0 + cerceve.height + paspartu_height, 0 - cerceve.height - paspartu_height);
    context.lineTo(0 + paspartu_height, 0 - paspartu_height);
    context.closePath();
    var cercevePattern = context.createPattern(cerceve, "repeat");
    context.fillStyle = cercevePattern;
    context.fill();
    context.restore();

    // 
    context.save();
    context.translate(x, y + tablo.height);
    context.rotate(180 * TO_RADIANS);
    context.scale(scale_cerceve, scale_cerceve);
    context.beginPath();
    context.moveTo(0 + paspartu_height, 0 - paspartu_height);
    context.lineTo(0 + cerceve.height + paspartu_height, 0 - cerceve.height - paspartu_height);
    context.lineTo(0 - (tablo.width / scale_cerceve) - cerceve.height - paspartu_height, 0 - cerceve.height - paspartu_height);
    context.lineTo(0 - (tablo.width / scale_cerceve) - paspartu_height, 0 - paspartu_height);
    context.closePath();
    context.fillStyle = cercevePattern;
    context.fill();
    context.restore();

    // 
    context.save();
    context.translate(x, y);
    context.scale(scale_cerceve, scale_cerceve);
    context.beginPath();
    context.moveTo(0 - paspartu_height, 0 - paspartu_height);
    context.lineTo(0 - cerceve.height - paspartu_height, 0 - cerceve.height - paspartu_height);
    context.lineTo(0 + (tablo.width / scale_cerceve) + cerceve.height + paspartu_height, 0 - cerceve.height - paspartu_height);
    context.lineTo((tablo.width / scale_cerceve) + paspartu_height, 0 - paspartu_height);
    context.closePath();
    context.fillStyle = cercevePattern;
    context.fill();
    context.restore();

    // t
    context.save();
    context.translate(x + tablo.width, y);
    context.rotate(90 * TO_RADIANS);
    context.scale(scale_cerceve, scale_cerceve);
    context.beginPath();
    context.moveTo(0 - paspartu_height, 0 - paspartu_height);
    context.lineTo(0 - cerceve.height - paspartu_height, 0 - cerceve.height - paspartu_height);
context.lineTo(0 + (tablo.height / scale_cerceve) + cerceve.height + paspartu_height, 0 - cerceve.height - paspartu_height);
context.lineTo(0 + (tablo.height / scale_cerceve) + paspartu_height, 0 - paspartu_height);
context.closePath();
context.fillStyle = cercevePattern;
context.fill();
context.restore();

...
}

Answer 1

yeah, that’s how it’s done. you can see my comment