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 8 of 8
  1. #1
    Regular Coder
    Join Date
    May 2011
    Posts
    357
    Thanks
    23
    Thanked 1 Time in 1 Post

    Change Pixel Color

    How could I change a specific Pixel Color?

  • #2
    Regular Coder
    Join Date
    May 2011
    Posts
    357
    Thanks
    23
    Thanked 1 Time in 1 Post
    Actualy How could you check a pixels color on a canvas?

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,030
    Thanks
    15
    Thanked 240 Times in 240 Posts
    On a canvas I don't know, but on a webpage it's very easy. You just make a single pixel div, give it the color and position you want.

  • #4
    Regular Coder
    Join Date
    May 2011
    Posts
    357
    Thanks
    23
    Thanked 1 Time in 1 Post
    Hmm thanks but currently I need to figure out canvas..

  • #5
    New Coder
    Join Date
    Jul 2012
    Posts
    11
    Thanks
    3
    Thanked 1 Time in 1 Post
    Quote Originally Posted by sherlockturtle View Post
    Actualy How could you check a pixels color on a canvas?
    This is only for Checking, Do you still want help with changing?
    Quote Originally Posted by DeadFred View 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)

  • #6
    New Coder
    Join Date
    Jul 2012
    Posts
    11
    Thanks
    3
    Thanked 1 Time in 1 Post
    For changing you'll need the imageData:
    Code:
    var xPixel;
    var yPixel;
    var imageData = canvasContext.getImageData(xPixel - 1, yPixel -1, 1, 1);
    Then you need to change the rgba values:
    Code:
    var red; //value between 0 and 255
    var green; //value between 0 and 255
    var blue; //value between 0 and 255
    var transparency; //value between 0 and 1
    
    imageData.data[0] = red;
    imageData.data[1] = green;
    imageData.data[2] = blue;
    imageData.data[3] = transparency * 255;
    And finally we need to place the imageData back into the canvas:
    Code:
    canvasContext.putImageData(imageData, xPixel - 1, yPixel - 1);
    Note if you want to change a bunch of pixel it might be easier to get a bigger part of the imageData

  • #7
    Regular Coder
    Join Date
    May 2011
    Posts
    357
    Thanks
    23
    Thanked 1 Time in 1 Post
    I can set them like this
    Code:
      var x =1;
      x=Math.floor(Math.random()*612)
      var y =1;
      y=Math.floor(Math.random()*256)
    var c=document.getElementById("mapa");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#0000FF";
    ctx.fillRect(x,y,1,1);

  • Users who have thanked sherlockturtle for this post:

    DeadFred (07-11-2012)

  • #8
    New Coder
    Join Date
    Jul 2012
    Posts
    11
    Thanks
    3
    Thanked 1 Time in 1 Post
    I guess that would make more sense, I was kinda in the ImageData mood for some reason


  •  

    Posting Permissions

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