javascriptimagecanvashtml5-canvasborder

Draw border around nontransparent part of image on canvas


I'm drawing an image onto a canvas using drawImage. It's a PNG that is surrounded by transparent pixels, like this:

isometric drawing of a patch of grass

How can I add a solid-colored border to the visible part of that image on the canvas? To clarify: I don't want a rectangle that surrounds the image's bounding box. The border should go around the grass patch.

I did consider using shadows, but I don't really want a glowing border, I want a solid one.


Solution

  • A bit late, but just draw the image offset which is much faster than analyzing the edges:

    var ctx = canvas.getContext('2d'),
        img = new Image;
    
    img.onload = draw;
    img.src = "https://i.sstatic.net/UFBxY.png";
    
    function draw() {
    
      var dArr = [-1,-1, 0,-1, 1,-1, -1,0, 1,0, -1,1, 0,1, 1,1], // offset array
          s = 2,  // thickness scale
          i = 0,  // iterator
          x = 5,  // final position
          y = 5;
      
      // draw images at offsets from the array scaled by s
      for(; i < dArr.length; i += 2)
        ctx.drawImage(img, x + dArr[i]*s, y + dArr[i+1]*s);
      
      // fill with color
      ctx.globalCompositeOperation = "source-in";
      ctx.fillStyle = "red";
      ctx.fillRect(0,0,canvas.width, canvas.height);
      
      // draw original image in normal mode
      ctx.globalCompositeOperation = "source-over";
      ctx.drawImage(img, x, y);
    }
    <canvas id=canvas width=500 height=500></canvas>