Compare context strokestyle and rbg of a pixel in canvas

Question

i want a function which checks the color of stroke and pixel in canvas. If the color of pixel in canvas and stroke is same, then do not change the color of the stroke. I have tried the function below but it doesn't work. Any idea how to achieve this? thanks

//this line gets pixel data
pixels = context.getImageData(0, 0, canvas.width, canvas.height);
var linecolor = context.strokeStyle;
if ((linecolor) === (colour.r && colour.g && colour.b)){
    context.strokeStyle = "rgb(255,255,0)"
    }

    function getpixelcolour(x, y) {
    var index = ((y * (pixels.width * 4)) + (x * 4));
    return {
    r: pixels.data[index],
    g: pixels.data[index + 1],
    b: pixels.data[index + 2],
    a: pixels.data[index + 3]
    };
}

Jump here http://stackoverflow.com/questions/6735470/get-pixel-color-from-canvas-on-mouseover — cave, Jul 23 '13 at 09:47
Thanks for the link but it doesn't solve my issue. Currently i can get pixel value and can change it, thats not the issue. The issue is comparing the stroke color and pixel color while drawing on canvas. If they both are the same then do not change stroke color. — Ash, Jul 23 '13 at 10:06
please try to make your question a bit clearer.. When do you want to change the colour of the stroke? When which pixel is what colour? — Vlad Otrocol, Jul 23 '13 at 12:53
My apologies for this Vlad. Um for example,if yellow stroke overlaps a yellow pixel in canvas, do not change stroke color. But when same stroke overlaps blue pixel, change stroke color to green. — Ash, Jul 23 '13 at 13:35

score 0 · Accepted Answer · answered Jul 23 '13 at 16:47

Here’s how to change the pixel color along a line based on the stroke and existing pixels.

First you need to get the XY coordinates along that the line from start to end:

Given:

var startPt={x:50,y:50}
var endPt={x:85,y:25}

You can get an XY along that line which is proportionally (p) between 0.00 and 1.00 like this:

// this function gets the xy along a line
// that is proportionally (p) from 0.00 to 1.00
function getLineXY(startPt,endPt,p) {
    var dx = endPt.x-startPt.x;
    var dy = endPt.y-startPt.y;
    var X = startPt.x + dx*p;
    var Y = startPt.y + dy*p;
    return( {x:X,y:Y} );
}

This is a loop that will get XY’s along the line and examine the pixel color at that xy:

If the colors do not match, you can use your setpixelcolour to change it as you desire.

for(var i=0;i<=1;i+=.005){

    // get the xy of a point along the line
    var pt=getLineXY(i);

    // get the rgb of that pixel at xy
    var ptColour=getpixelcolour(pt.x,pt.y);

    // if the strokeColor is not the ptColor, change the pixel's colour
    if(
        !(strokeColour.r ==  ptColor.r &&
          strokeColour.g ==  ptColor.g &&
          strokeColour.b ==  ptColor.b)
      )
      {
            setpixelcolour(pt.x,pt.y,newColor);
      }
}

One “gotcha” in this process:

Canvas Context will add anti-aliasing to the strokes and fills it draws.

That anti-aliasing will mess up your color comparisons.

Hey thanks mark..i will have a surely have a look at this, seems a bit complicated :). — Ash, Jul 24 '13 at 10:02
Hey Mark, i have a question to ask. Forgive me if its dumb because i'm a freshy in javascript. In the if statement, you have like strokeColor.r == ptColor.r, where does this "strokeColor" come from? You havent specified its value anywhere in the code. — Ash, Jul 29 '13 at 16:32

Compare context strokestyle and rbg of a pixel in canvas

1 Answers1