Reverse Clipping in Canvas

Question

I want to clip html5 canvas so that I can achieve drawing result as per following image.

I want to achieve clip path such that all drawing will be performed only in black area.

Answer 1

Method 1

Assuming the white areas are transparent and the black is non-transparent then you can use composite mode:

ctx.globalCompositeOperation = 'source-in';
... draw graphics on top - only solid color will be affected ...
ctx.globalCompositeOperation = 'source-over';      // reset to default mode

A demo fiddle for this here

Method 2

Another simpler approach is to simply fill the canvas with the graphics you need then use clearRect() for those areas you want transparent.

This operation is fairly fast so there shouldn't be any flashing (and in case you can trigger this operation with a single requestAnimationFrame call).

A demo fiddle with clearRect
A demo fiddle with clearRect + requestAnimationFrame

Just note that calling rAF makes the code asynchronous but the purpose of using it is that your draw operations are synchronized within a frame update so flicker will be removed (if you should for some reason get problem with that).

Method 3

Create rectangle regions surrounding the area you want to preserve by a series of call to rect(). The set that as a clipping mask by using clip().

This techniques works best if the non-clipped areas are in a certain order or else you would have to define a lot of regions.

Remember to translate canvas 0.5 pixel first and only use integer values for the rectangles.

Method 4

Parse the pixel buffer manually to fill in pixels in the areas fulfilling the requirements, for example non-transparent pixels only.

Just be aware of that this is probably the slowest approach, it's affected by CORS restrictions (in case you draw an external image onto the canvas first) and it's more tedious if you want to fill in shapes, images, gradients and so forth which in case you would probably prefer an off-screen canvas to copy from.

There are other ways using different composite modes and drawing order to achieve the same result but I leave it with this as it should cover most scenarios.

Answer 2

You can use layering to fill your need:

• make a copy of your image with all black made transparent
• draw the original image on the canvas
• draw your desired shapes
• draw the transparent image on top

A Demo: http://jsfiddle.net/m1erickson/dFRUf/

This function creates a temporary canvas with the color-range you specify made transparent:

function makeImageTransparentByColor(image,r1,r2,g1,g2,b1,b2){
    // create a temporary canvas and draw the image on the canvas 
    var bk=document.createElement("canvas");
    var bkCtx=bk.getContext("2d");
    bk.width=image.width;
    bk.height=image.height
    bkCtx.drawImage(image,0,0);
    // get the pixel array from the canvas
    var imgData=bkCtx.getImageData(0,0,bk.width,bk.height);
    var data=imgData.data;
    // loop through each pixel and make every pixel transparent
    // that is between r1-r2, g1-g2 and b1-b2
    for(var i=0;i<data.length;i+=4){
        var r=data[i];
        var g=data[i+1];
        var b=data[i+2]
        if(r>=r1 && r<=r2 && g>=g1 && g<=g2 && b>=b1 && b<=b2){
            data[i]=0;
            data[i+1]=0;
            data[i+2]=0;
            data[i+3]=0;
        }
    }
    // put the modified pixels back on the canvas
    bkCtx.putImageData(imgData,0,0);
    // return the canvas with transparent image
    return(bk);
}