Change Pixel Color

How could I change a specific Pixel Color?

Actualy How could you check a pixels color on a canvas?

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.

Hmm thanks but currently I need to figure out canvas..

Actualy How could you check a pixels color on a canvas?
This is only for Checking, Do you still want help with changing?
First you'll have to get the ImageData of the specific pixel of your canvas:

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:

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)

For changing you'll need the imageData:

var xPixel;
var yPixel;
var imageData = canvasContext.getImageData(xPixel - 1, yPixel -1, 1, 1);

Then you need to change the rgba values:

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:

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

I can set them like this


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);

I guess that would make more sense, I was kinda in the ImageData mood for some reason