Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Check Canvas Image Pixel

    How could I select a canvas Image Pixel? To check if its a specific color?
    -Thanks

  • #2
    New Coder
    Join Date
    Jul 2012
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I found sherlockturtles post which is kinda like what I want but I Want to know how to check its specific color.
    Last edited by Tim Conner; 07-11-2012 at 05:25 AM.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    http://instant-eyedropper.com/

    http://blog.flexexamples.com/2007/08...-and-getpixel/


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 07-11-2012 at 08:33 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    New Coder
    Join Date
    Jul 2012
    Posts
    11
    Thanks
    3
    Thanked 1 Time in 1 Post
    First you'll have to get the ImageData of the specific pixel of your canvas:
    Code:
    var xPixel
    var yPixel
    
    var pixelData canvasContext.getImageData(xPixel - 1, yPixel - 1, 1, 1).data;
    The pixelData variable wil now contain a array with your rgb and transperancy values:
    Code:
    var red = pixelData[0];
    var green = pixelData[1];
    var blue = pixelData[2];
    var transperancy = pixelData[3]/255;(this is a value from 0 - 255 so I convert it to 0 - 1)
    Last edited by DeadFred; 07-11-2012 at 01:01 PM.

  • #5
    New Coder
    Join Date
    Jul 2012
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok. So what would canvascontent be?
    Last edited by Tim Conner; 07-11-2012 at 03:55 PM.

  • #6
    New Coder
    Join Date
    Jul 2012
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have this code but Getimage data does not work, because its a canvas?
    Code:
    var c=document.getElementById("mapa");
    
    
      
      for (i=0; i<water/4*6; i++)
      {
      var x =1;
      x=Math.floor(Math.random()*612)
      var y =1;
      y=Math.floor(Math.random()*256)
    
    var ctx=c.getContext("2d");
    ctx.fillStyle="#0000FF";
    ctx.fillRect(x,y,1,1);
      }
       
    
       for (i=0; i<water*6; i++)
      {
      var x =1;
      var y =1;
        x=Math.floor(Math.random()*612)
      y=Math.floor(Math.random()*256)
      
    var pixelData = c.getImageData(x + 1, y, 1, 1).data;
    var red = pixelData[0];
    var green = pixelData[1];
    var blue = pixelData[2];
    if(blue == 255){
    
    var ctx=c.getContext("2d");
    ctx.fillStyle="#0000FF";
    ctx.fillRect(x,y,1,1);
    }
    else{
    pixelData = c.getImageData(x, y-1, 1, 1).data;
    red = pixelData[0];
    green = pixelData[1];
    blue = pixelData[2];
    
    if(blue == 255){
    
    var ctx=c.getContext("2d");
    ctx.fillStyle="#0000FF";
    ctx.fillRect(x,y,1,1);
    }
    else{
    
    pixelData  = c.getImageData(x, y+1, 1, 1).data;
    red = pixelData[0];
    green = pixelData[1];
    blue = pixelData[2];
    if(blue ==255){
    
    var ctx=c.getContext("2d");
    ctx.fillStyle="#0000FF";
    ctx.fillRect(x,y,1,1);
    }
    else{
    
    pixelData  = c.getImageData(x + 1, y, 1, 1).data;
    red = pixelData[0];
    green = pixelData[1];
    blue = pixelData[2];
    if(blue == 255){
    
    var ctx=c.getContext("2d");
    ctx.fillStyle="#0000FF";
    ctx.fillRect(x,y,1,1);
    }
    else{
    i--;
    }
    
    }
    }
    }

  • #7
    New Coder
    Join Date
    Jul 2012
    Posts
    11
    Thanks
    3
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Tim Conner View Post
    Ok. So what would canvascontent be?
    its your ctx, its canvasContext btw.

    And thats the reason why it isnt working

  • #8
    New Coder
    Join Date
    Jul 2012
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wait. I tried this my goal is to have only blue can be next to blue(I seed a couple before hand)
    Code:
     for (i=0; i<water; i++)
      {
      var x =1;
      var y =1;
        x=Math.floor(Math.random()*100)
      y=Math.floor(Math.random()*1)
      
    var pixelData = c.canvasContext(x + 1, y, 1, 1).data;
    var red = pixelData[0];
    var green = pixelData[1];
    var blue = pixelData[2];
    if(blue == 255){
    
    var ctx=c.canvasContext("2d");
    ctx.fillStyle="#0000FF";
    ctx.fillRect(x,y,1,1);
    }
    else{
    pixelData = c.canvasContext(x, y-1, 1, 1).data;
    red = pixelData[0];
    green = pixelData[1];
    blue = pixelData[2];
    
    if(blue == 255){
    
    var ctx=c.canvasContext("2d");
    ctx.fillStyle="#0000FF";
    ctx.fillRect(x,y,1,1);
    }
    else{
    
    pixelData  = c.canvasContext(x, y+1, 1, 1).data;
    red = pixelData[0];
    green = pixelData[1];
    blue = pixelData[2];
    if(blue ==255){
    
    var ctx=c.canvasContext("2d");
    ctx.fillStyle="#0000FF";
    ctx.fillRect(x,y,1,1);
    }
    else{
    
    pixelData  = c.canvasContext(x + 1, y, 1, 1).data;
    red = pixelData[0];
    green = pixelData[1];
    blue = pixelData[2];
    if(blue == 255){
    
    var ctx=c.canvasContext("2d");
    ctx.fillStyle="#0000FF";
    ctx.fillRect(x,y,1,1);
    }
    else{
    i--;
    }
    
    }
    }
    }

  • #9
    New Coder
    Join Date
    Jul 2012
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ? Please im not sure what im doing wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •