CODEWITHSUNDEEP
htmlcanvaspixel
Luis
Luis

Reputation: 2715

Insert a single pixel into HTML5 canvas

I want to insert a pixel with a color, and I use this code:

context.fillStyle='RGB('+s[i]+')';
context.fillRect(i,y,1,1)

Is there a shorter way to do it? e.g. in a single line of code? My main goal is to reduce the amount of code.

Upvotes: 3

Views: 1632

Answers (4)

Loktar
Loktar

Reputation: 35319

There really isn't a shorter way to do it besides the method you used above. You don't have to include a fillStyle every time so it essentially is only one line of code to fill a pixel.

Like Petteri pointed out there is another way to fill pixels, it involves manipulating the pixel data directly.

Live Demo

var canvasData = ctx.getImageData(0,0,canvasWidth,canvasHeight);

//color 100,100 red
canvasData.data[((100*(canvasData.width*4)) + (100*4)) + 0] = 255;
ctx.putImageData(canvasData,0,0);

also note with the above method you would need to repeat that line 3 times once for each component of the color. For example to set red, green, blue, and the alpha you would use 

canvasData.data[((100*(canvasData.width*4)) + (100*4)) + 0] //red
canvasData.data[((100*(canvasData.width*4)) + (100*4)) + 1] //green
canvasData.data[((100*(canvasData.width*4)) + (100*4)) + 2] //blue
canvasData.data[((100*(canvasData.width*4)) + (100*4)) + 3] //alpha

granted you could have your data in an array, and just loop through that and color as needed.

Upvotes: 1

Luis
Luis

Reputation: 2715

fillStyle="rgb("+a[m];
fillRect(m,o,1,1);

Someone did with that :P

Upvotes: 0

Simon Sarris
Simon Sarris

Reputation: 63872

No, there is no single line of code way to change a single pixel to one color. Well, there sort-of is.

As Petteri noted, there is a way to change each pixel directly, which will probably accomplish what you want. I assume what you want is to change one pixel to one color, and the next pixel to another color, etc.

For instance here is a function for desaturating a canvas. What it does is takes every pixel and averages the RGB values to be color-neutral (have no saturation). The result is a grayscale image.

function grayscale() {
    var imageData = ctx.getImageData(0,0,can.width, can.height);
    var pixels = imageData.data;
    var numPixels = pixels.length;

    ctx.clearRect(0, 0, can.width, can.height);

    for (var i = 0; i < numPixels; i++) {
        var average = (pixels[i*4] + pixels[i*4+1] + pixels[i*4+2]) /3;
        // set red green and blue pixels to the average value
        pixels[i*4] = average;
        pixels[i*4+1] = average;
        pixels[i*4+2] = average;
    }
    ctx.putImageData(imageData, 0, 0);
}

As you can see it is iterating over each pixel. It could be easily mofied to have each pixel changed as a one-liner.

Instead of: 

pixels[i*4] = average;
pixels[i*4+1] = average;
pixels[i*4+2] = average;

You'd write:

// Take out 3 values starting at i*4 and add the new RGB for that pixel
pixels.splice(i*4,3,REDVALUE,GREENVALUE,BLUEVALUE);

Which would accomplish what you'd want. It's not the most efficient way under the sun, but it would accomplish your goal :)

Upvotes: 0

Petteri H
Petteri H

Reputation: 12252

You can edit the image data of the canvas directly. Here is a good example how to do it: http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/

Upvotes: 0

Related Questions