Login/Register
putImageData(), how to keep old pixels if new pixels are transparent?
Asked Answered
Solved javascripthtmlcanvastransparencypixel
M

5

14

In html5, when you draw to a canvas using putImageData(), if some of the pixels you are drawing are transparent (or semi-transparent), how do you keep old pixels in the canvas unaffected?

example:

var imgData = context.createImageData(30,30);
for(var i=0; i<imgData.data.length; i+=4)
{
imgData.data[i]=255;
imgData.data[i+1]=0;
imgData.data[i+2]=0;
imgData.data[i+3]=255;
if((i/4)%30 > 15)imgData.data[i+3] = 0;
}
context.putImageData(imgData,0,0);

The right half of the 30x30 rect is transparent. If this is drawn over something on the canvas, pixels behind the right half are removed (or become thransparent). How do I keep them?

Mogul answered 5/3, 2014 at 9:56 Comment(0)
K
13

You can use getImageData to create a semi-transparent overlay:

  • create a temporary offscreen canvas
  • getImageData to get the pixel data from the offscreen canvas
  • modify the pixels as you desire
  • putImageData the pixels back on the offscreen canvas
  • use drawImage to draw the offscreen canvas to the onscreen canvas

enter image description here

Here's example code and a Demo: http://jsfiddle.net/m1erickson/CM7uY/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var context=canvas.getContext("2d");

    // draw an image on the canvas
    var img=new Image();
    img.onload=start;
    img.src="https://dl.dropboxusercontent.com/u/139992952/stack1/landscape1.jpg";
    function start(){
        canvas.width=img.width;
        canvas.height=img.height;
        context.drawImage(img,0,0);

        // overlay a red gradient 
        drawSemiTransparentOverlay(canvas.width/2,canvas.height)

    }

    function drawSemiTransparentOverlay(w,h){

        // create a temporary canvas to hold the gradient overlay
        var canvas2=document.createElement("canvas");
        canvas2.width=w;
        canvas2.height=h
        var ctx2=canvas2.getContext("2d");

        // make gradient using ImageData
        var imgData = ctx2.getImageData(0,0,w,h);
        var data=imgData.data;
        for(var y=0; y<h; y++) {
            for(var x=0; x<w; x++) {
                var n=((w*y)+x)*4;
                data[n]=255;
                data[n+1]=0;
                data[n+2]=0;
                data[n+3]=255;
                if(x>w/2){
                    data[n+3]=255*(1-((x-w/2)/(w/2)));
                }
            }
        }

        // put the modified pixels on the temporary canvas
        ctx2.putImageData(imgData,0,0);

        // draw the temporary gradient canvas on the visible canvas
        context.drawImage(canvas2,0,0);

    }


}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=200></canvas>
</body>
</html>

Alternatively, you might check out using a linear gradient to do your effect more directly.

http://jsfiddle.net/m1erickson/j6wLR/

Koffler answered 5/3, 2014 at 16:20 Comment(2)
Thanks, drawing a canvas onto another using drawImage() is exactly what I need. – Mogul
If you need many canvases will there be performance problems? – Antemeridian
G
7

Problem

As you know, your statement

if((i/4)%30 > 15)imgData.data[i+3] = 0;

will make pixels on the right half of the image be transparent, so that any other object on the page behind the canvas can be seen through the canvas at that pixel position. However, you are still overwriting the pixel of the canvas itself with context.putImageData, which replaces all of its previous pixels. The transparency that you add will not cause the previous pixels of to show through, because the result of putImageData is not a second set of pixels on top of the previous pixels in the canvas, but rather the replacement of existing pixels.

Solution

I suggest that you begin your code not with createImageData which will begin with a blank set of data, but rather with getImageData which will give you a copy of the existing data to work with. You can then use your conditional statement to avoid overwriting the portion of the image that you wish to preserve. This will also make your function more efficient.

var imgData = context.getImageData(30,30);
for(var i=0; i<imgData.data.length; i+=4)
{
  if((i/4)%30 > 15) continue;
  imgData.data[i]=255;
  imgData.data[i+1]=0;
  imgData.data[i+2]=0;
  imgData.data[i+3]=255;
}
context.putImageData(imgData,0,0);
Gingras answered 5/3, 2014 at 16:44 Comment(1)
Thanks. You are right, using getImageData() you can do whatever you want with old pixels, but you need to have a formula to blend new pixels with old ones. I've tried one and it was perfect, but soon when I began to use this in a for loop (for drawing), I got a strange result when I draw something that is transparent. – Mogul
Q
6

Something that tripped me up that may be of use... I had problems with this because I assumed that putImageData() and drawImage() would work in the same way but it seems they don't. putImageData() will overwrite existing pixels with its own transparent data while drawImage() will leave them untouched.

When looking into this I just glanced at the docs for CanvasRenderingContext2D.globalCompositeOperation (should have read more closely), saw that source-over is the default and didn't realise this would not apply to putImageData()

Drawing into a temporary canvas then and using drawImage() to add the temp canvas to the main context was the solution I needed so cheers for that.

Quadrature answered 10/11, 2018 at 13:3 Comment(0)
D
1

I wanted to copy a CRISP, un modified version of the canvas on top of itself. I eventually came up with this solution, which applies.

https://jsfiddle.net/4Le454ak/1/

The copy portion is in this code:

var imageData = canvas.toDataURL(0, 0, w, h);
var tmp = document.createElement('img');
tmp.style.display = 'none'
tmp.src = imageData;
document.body.appendChild(tmp);
ctx.drawImage(tmp, 30, 30);

What's happening:

  • copy image data from canvas
  • set image data to a non-displayed <img> (<img> has to be in dom though)
  • draw that image back onto the canvas
  • you can delete or reuse the <img> at this point
Drumfish answered 4/4, 2017 at 14:24 Comment(0)
B
1

It is an old question, but I had a similar issue and came up with another solution that fits me better (similar to @popClingwrap's answer, but I'll elaborate a bit more). I have a WebWorker and I want it to copy and paste an svg file multiple times in an existing canvas. If the source of your ImageData is another Canvas, and you want to copy the data to another canvas, there is an easier way than manipulating pixel values in a loop. the ctx.drawImage() function does overlay images respecting transparency and can also take another canvas as source.

So I used Canvg to create a source canvas containing my source image ( For your application this will look different)

const cnv = new OffscreenCanvas(100, 100);

const loadCanvas = async () => {
  const v = await Canvg.from(cnv.getContext("2d"), src, preset);
  await v.render();
};

For your example this would probably look something like this

var cnv = document.createElement('canvas');
var ctx = cnv.getContext('2d');
cnv.width = 30;
cnv.height = 30;
ctx.putImageData(imgData, 0, 0);

And then you can draw this transparent image on top of an existing image as often as needed with:

ctx.drawImage(cnv, 0, 0);
Bloodless answered 28/12, 2022 at 9:41 Comment(0)

© 2022 - 2025 — McMap. All rights reserved.