Develop Reference

Fabric JS pixel by pixel manipulation

I have overlay image with rectangle transparent hole. Beneath is scalable and draggable image. How to cut only visible part of image ?
How to determine size and position of transparent rectangle ? Is it possible to do pixel by pixel alpha channel search only on overlay image ?
Any other ideas ?
EDIT:
Solution to another quoted problem is usefull, although it works only on whole canvas not on individual items like background, overlay or added images or shapes. Is it possible to read pixel values on individual fabric elements ?
I use overlay image as external png files.

The FabricJS API does not include a method to fetch the pixel values of an image.
You will have to draw your overlay image onto an html5 canvas and use getImageData to fetch the pixel data from that canvas.
getImageData().data contains the red, green, blue & alpha information for each pixel on the canvas.
You can test each pixel's alpha value and determine the minimum & maximum boundary of the transparent rectangle.
Here's example code and a Demo:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var img=new Image();
img.crossOrigin='anonymous';
img.onload=start;
img.src="http://masterblocks.co.in/static/img/logo.png";
function start(){
cw=canvas.width=img.width;
ch=canvas.height=img.height
ctx.drawImage(img,0,0);
// clear a test rectangle
ctx.clearRect(100,100,100,75);
// get clear rect bounds
var bounds=findCutoutBounds();
// test: stroke the bounds
ctx.lineWidth=2;
ctx.strokeStyle='red';
ctx.strokeRect(bounds.x,bounds.y,bounds.width,bounds.height);
}
// Get the imageData of that canvas
function findCutoutBounds(){
var minX=1000000;
var minY=1000000;
var maxX=-1;
var maxY=-1;
var data=ctx.getImageData(0,0,canvas.width,canvas.height).data;
for(var y=0;y<ch;y++){
for(var x=0;x<cw;x++){
var n=(y*cw+x)*4;
if(data[n+3]<5){
if(y<minY){minY=y;}
if(y>maxY){maxY=y;}
if(x<minX){minX=x;}
if(x>maxX){maxX=x;}
}
}}
return({x:minX,y:minY,width:maxX-minX,height:maxY-minY});
}
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<h4>The bounding box of the transparent rectangle is stroked in red</h4>
<canvas id="canvas" width=300 height=300></canvas>

drawing on top of the image using paperjs

I'm using Paper.js to draw lines on canvas.
I want to be able to upload local image to the paperjs canvas and then be able to draw on top of it.
What I did is:
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
function make_base()
{
var img = document.createElement("img");
img.src = "http://paperjs.org/tutorials/images/working-with-rasters/mona.jpg";
context.drawImage(img, 100, 100);
}
document.getElementById('imageUpload').addEventListener('click', function(){
make_base();
});
This successfully adds an image to my canvas, but when I draw on canvas, image disappears and the image is on top of the lines, should be behind them.

You can add the image to the paper project as a paperjs Raster item, as such
var raster = new Raster({
source: "http://paperjs.org/tutorials/images/working-with-rasters/mona.jpg",
position: view.center
});
It will be inserted into the project in the current layer. You can then use paperjs functions like sendToBack and bringToFront to manipulate what appears where. I would probably put the raster image on the first Layer then add a new Layer for the drawing to make it easy to keep track of.

If you don't need to change or working with the image, use background-image on canvas tag:
<canvas id="canvas"
style="background-image: url(http://paperjs.org/tutorials/images/working-with-rasters/mona.jpg);"></canvas>

putImageData(), how to keep old pixels if new pixels are transparent?

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?

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
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/

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

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.

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

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

How to delete an instance of an image in Javascript

In my program I am drawing an image the canvas multiple times. My code looks something lik this:
<img id="image1" src="image1.png" width="200" height="100" hidden ="hidden">
<script type ="text/javascript">
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
ctx.drawImage(image1, 50, 50, 200, 100);
ctx.drawImage(image1, 100, 100, 200, 100);
<script/>
My questions is, is it possible to delete just one instance of this image? For instance just delete the image drawn at 100,100 and leave the one at 50,50?

The moment you draw something to a canvas it stops being an independent object and becomes a bunch of pixels on a canvas. The information that these pixels together form a larger object is lost. You could remove it by using context.clearRect, but that will also erase anything else which is drawn on the same area, so it won't do what you want when the image overlaps with other content.
I would recommend you to clear the whole canvas and draw the whole scene again without the image.
Another option is to use multiple canvas'es as layers by placing them on top of each other using CSS positioning. That way any transparent pixels on the top canvas will show the content of the canvas below. This allows you to erase parts of one canvas without affecting the content of the canvas above or below it.

Fill image with a repeatable texture

Would it be possible to fill a png with transparency with a pattern (a repeatable texture)?
Here's a quick example of loading an image onto the canvas, just not sure how to fill it with a pattern, if that isn't possible then would there be a way to extract a path from the png?
<script>
var c = document.getElementById("a");
var ctx = c.getContext("2d");
var test= new Image();
test.src = "images/test.png";
test.onload = function() {
ctx.drawImage(test, 0, 0);
};
</script>
<body>
<canvas id="a"></canvas>
</body>
I've also created a jsfiddle with an actual loaded png
This is the effect I'm looking to achieve
Update
working example based on Simon Sarris' answer
http://jsfiddle.net/sergeh/G8egW/6/

First, draw the image to Canvas.
Then do globalCompositeOperation = 'source-in';
Then draw the pattern. It will only exist where the image was.
http://jsfiddle.net/G8egW/2/
If you had stuff already on the canvas before this time, you'll need to do the above operations on an in-memory canvas and then draw that canvas to your normal canvas. Like this:
http://jsfiddle.net/G8egW/5/
(notice the difference in the grid)