Home/ Questions/Q 6330435
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T17:52:12+00:00

Would it be possible to fill a png with transparency with a pattern (a

  • 0

Would it be possible to fill a png with transparency with a pattern (a repeatable texture)?

Here’s a quick example of loading an image onto the canvas, just not sure how to fill it with a pattern, if that isn’t possible then would there be a way to extract a path from the png?

<script>
    var c = document.getElementById("a");
    var ctx = c.getContext("2d");

   var test= new Image();
    test.src = "images/test.png";
    test.onload = function() {
        ctx.drawImage(test, 0, 0);
    };
</script>

<body>
    <canvas id="a"></canvas>
</body>

I’ve also created a jsfiddle with an actual loaded png

This is the effect I’m looking to achieve
enter image description here

Update

working example based on Simon Sarris’ answer
http://jsfiddle.net/sergeh/G8egW/6/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First, draw the image to Canvas.

    Then do globalCompositeOperation = 'source-in';

    Then draw the pattern. It will only exist where the image was.

    http://jsfiddle.net/G8egW/2/

    If you had stuff already on the canvas before this time, you’ll need to do the above operations on an in-memory canvas and then draw that canvas to your normal canvas. Like this:

    http://jsfiddle.net/G8egW/5/

    (notice the difference in the grid)

    • 0