Check Canvas Segment For Transparency

Question

I have a canvas. The canvas is w pixels wide and h pixels high.

There is an image on the canvas.

Is there a pixel (or more) with an opacity of less than 1.0 between the two points (a,b) and (c,d)?

It doesn't matter whether there is one (semi-)transparent pixel or whether there are a hundred. A simple true or false value will suffice.

Performance does not matter too much (since this will only be ran once every time the page is loaded, for about 500k pixels).

How does one find out?

hi, there was an issue with the code. updated fiddle https://jsfiddle.net/f5b8o3hn/ — bfmags, Jun 04 '16 at 20:21
@bfmags hey, thanks. I accepted it before since it gave me what I needed to accomplish the task :) — Lucien, Jun 04 '16 at 20:22

score 1 · Accepted Answer · edited May 23 '17 at 12:22

based on Bresenham algorithm in Javascript

https://jsfiddle.net/f5b8o3hn/

function line(x0, y0, x1, y1){
   var dx = Math.abs(x1-x0);
   var dy = Math.abs(y1-y0);
   var sx = (x0 < x1) ? 1 : -1;
   var sy = (y0 < y1) ? 1 : -1;
   var err = dx-dy;

   while(x0!=x1 || y0!=y1){

     var pixeldata = context.getImageData(x0, y0, 1, 1);
     var data = pixeldata.data;
     for (var i = 0, n = data.length; i < n; i += 4) {
        if (data[i + 3] < 255) {
          console.log(true); //true 
          break;
        }
        console.log(data[i + 3]);
     }

     var e2 = 2*err;
     if (e2 >-dy){ err -= dy; x0  += sx; }
     if (e2 < dx){ err += dx; y0  += sy; }
   }
}

//pixeldata[0]   Value of red in decimal (int between 0 and 255)
//pixeldata[i+1] Value of green in decimal (int between 0 and 255)
//pixeldata[i+2] Value of blue in decimal (int between 0 and 255)
//pixeldata[i+3] Alpha Value (int between 0 and 255)

Check Canvas Segment For Transparency

1 Answers1