I want to use canvas to dynamically alter the transparency index of images, is this possible?
There are several ways depending on what you want to accomplish.
Firstly if you just want to display an image with a color for the transparency, you don't need canvas. You can just add CSS styling to the image:
<img src="theURL" style="background-color: red;">
Lets say you do want canvas though. The most efficient way is to just draw the color first and then the image.
Another way is to draw the image to the canvas, set the globalcompositeOperateion to 'destination-over' and then fill the area of the image with the color you want.
ctx.drawImage(img,0,0);
ctx.globalCompositeOperation = 'destination-over'
ctx.fillStyle = 'blue';
ctx.fillRect(0,0,280,210); // if the width and height are 280x210
See it in action here, replacing a transparent background with blue:
http://jsfiddle.net/MEHbr/327/
I would advise against using getImageData and putImageData unless you need the fine per-pixel control, as they are much slower.
For saving the image, canvas2Image has the best options:
http://www.nihilogic.dk/labs/canvas2image/
Yes it is possible you have to use getImageData and putImagaData
Reference
imageData = canvasContext.getImageData( 0, 0, canvasContext.canvas.width, canvasContext.canvas.height );
for( i = 0; i < imageData.length; i+= 4 ) {
imageData[i+3] = opacityValue;
}
canvasContext.putImageData(imageData, 0, 0 );
Heres an example that does what your looking for, (also what the above snippet was taken from)
http://labs.josh-ho.com/getImageData/
You can create a new class for your canvas and create css to style it:
.canvas_class{
-moz-opacity:0.5; /* For older FF versions */
-khtml-opacity:0.5;
opacity:0.5;
}
You can then use the jQuery library to modify the DOM live:
http://api.jquery.com/attr/
I hope this helps you add changeable transparency to your canvases :D
Related
Can someone please advise how to do this:
I have a PNG image being used on a site for a client. The image has a transparent background and the content of the image is essentialy an outlined drawing. For this example lets say its a stick man drawing. Everything is transparent except the stickmans outlines.
What I want to be able to do is to add this image whether its as a background image or just as an image element. and to apply a CSS overlay that will ONLY colour the actual content or the "lines" in the image. In otherwords Stickman can have his colour changed from white, to blue, red, green etc via a css overlay that will not colour background.
I am aware I can do this in photoshop but I am trying to create a more dynamic solution for this. it is to allow for dynamic changing of the image
Expirement with this:
filter: hue-rotate(0deg);
You would change 0 to anything from 0 to 360.
This changes the hue as a rotation around the color wheel.
If the logo's background is always the same colour, you could cut out the logo leaving the logo transparent inside a coloured background.
CSS could then be used to change the logo colour, by changing the background-color of the image.
This only works if the logo background is always the same colour.
I see that u want to kinda color a specific part of a photo, right?.
(I had searched kinda lot about ur question)
anyway,HTML has a tag named to chose a specific part, but unfortunately it works with tag to make a part of an image clickable; roughly speaking, doing that cant be done with HTML and CSS only (as I think).
You can also use JS with The HTML code(you will cover your wanted area and color it).
function gg() {
var c = document.getElementById("locations");
var ctx = c.getContext("2d");
var img = new Image();
img.src = 'test.bmp'; // any pic u want
img.onload = function() { // after the pic is loaded
ctx.drawImage(this,0,0); // add the picture
ctx.beginPath(); // start the rectangle
ctx.moveTo(39,40);
ctx.lineTo(89,43);
ctx.lineTo(82,72);
ctx.lineTo(40,74);
ctx.lineTo(39,40);
ctx.fillStyle = "rgba(32, 45, 21, 0.3)"; // set color
ctx.fill(); // apply color
};
}
<canvas id="locations" width="400" height="300" style="border:1px solid #d3d3d3;">
Your browser can't read canvas</canvas>
<input type="button" onclick="gg()" value="h">
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.
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.
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);
}
I want to fill no color to canvas i.e. I want the background div color should keep on displaying in the div. I have googled it but didn't find any solution to keep fillStyle as no color.
Also I tried omitting the fillStyle but it leave me with black color.
Any options available?
Thanks
You need to use this to clear the canvas:
context.clearRect(0, 0, canvas.width, canvas.height);
(or the rectangle you need).
Also make sure you have no CSS rules set for the canvas element's background (which might be the case if your canvas is not transparent on init as canvas is transparent as default).
If you need to clear a non-regular shape you can use composite mode:
context.globalCompositeOperation = 'destination-out';
(xor and source-out can also be used too to a certain degree too to remove existing pixels but with some variations).
This will clear the canvas in the form of the next shape (Path) you draw (or use an image which solid pixels will clear the canvas).
I don't know what you're trying to do, but it seems you want to make your canvas transparent. You could do that in JavaScript:
context.fillStyle = "rgba(0, 0, 200, 0)";
Or in CSS, where foo would be the id of the canvas element. Note that this would make the element per se transparent, not just it's contents.
#foo {
opacity: 0;
}
You need to clear your canvas, not draw transparency... just think about that. You can't clean a glass, by using clear paint, the same is applied to the <canvas> element.
http://jsfiddle.net/Z6XTg/1/
this canvas demo does a very simple
ctx.clearRect(0,0,canvas.width,canvas.height);
before it draws anything, thus maintaining the canvas transparency.
When drawing lines with the HTML5 canvas element, is it possible to define the stroke style of the lines? Basically in Photoshop and other similar programs, you can define a stroke style for lines that looks like it is "hand drawn". Is is possible to do anything like that in HTML5 canvas or am I shooting for the moon here?
Thanks
-Jesse
It is possible but not by default. See ShadowCloud's post for what you can do by default (very little).
Depending on what you want, it shouldn't be too hard.
If by "hand drawn" you mean you want jitter, you'd have to break up every drawn line/curve into smaller parts and add some noise to each of the points.
If you want a brush you'd have to break up every drawn line/curve into smaller parts and call drawImage every few pixels to emulate a photoshop brush.
Almost all of them rely on breaking up your lines and curves into smaller bits, so you should figure that out foremost.
If you decide to implement these and are having trouble breaking up bezier curves and want help, let me know and I'll give you my code for that.
There is no standard API in HTML5 Canvas to manage such thing.
You can just set the color or the width of the stroke, for example:
context.strokeStyle = '#f00'; // red color
context.lineWidth = 4; // 4px wide
// Draw some rectangles.
context.fillRect (0, 0, 100, 100);
context.strokeRect(0, 0, 100, 100);
You can try to get more control using a library (Processing.js or Fabric.js)
How can I make a canvas transparent? I need to because I want to put two canvases on top of one another.
Canvases are transparent by default.
Try setting a page background image, and then put a canvas over it. If nothing is drawn on the canvas, you can fully see the page background.
Think of a canvas as like painting on a glass plate.
To clear a canvas after having drawn on it, just use clearRect:
const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
I believe you are trying to do exactly what I just tried to do:
I want two stacked canvases... the bottom one has a static image and the top one contains animated sprites. Because of the animation, you need to clear the background of the top layer to transparent at the start of rendering every new frame. I finally found the answer: it's not using globalAlpha, and it's not using a rgba() color. The simple, effective answer is:
context.clearRect(0,0,width,height);
Iif you want a particular <canvas id="canvasID"> to be always transparent you just have to set
#canvasID{
opacity:0.5;
}
Instead, if you want some particular elements inside the canvas area to be transparent, you have to set transparency when you draw, i.e.
context.fillStyle = "rgba(0, 0, 200, 0.5)";
Just set the background of the canvas to transparent.
#canvasID{
background:transparent;
}
Paint your two canvases onto a third canvas.
I had this same problem and none of the solutions here solved my problem. I had one opaque canvas with another transparent canvas above it. The opaque canvas was completely invisible but the background of the page body was visible. The drawings from the transparent canvas on top were visible while the opaque canvas below it was not.
fillStyle might not be what you are looking for because it can't really clear the canvas; it will either paint it with a solid color or with a transparent color which doesn't paint anything.
The trick that did for me relies on an implementation detail about the <canvas></canvas>. They "reset" when resized (tested on Chrome and Firefox):
canvas.width = canvas.width
This phenomenon initially struck me as a very annoying behavior, but it also became the only way I know to hard reset the canvas.
If you're exporting your canvas, remember to export as png!!
Been there, failed at that xD
Here's a minimal proof of concept of the default transparency of canvases, and using position: absolute to stack them on top of each other:
const canvases = [...Array(4)]
.map(() => document.createElement("canvas"));
canvases.forEach((canvas, i) => {
document.body.appendChild(canvas);
const ctx = canvas.getContext("2d");
const saturation = 100 / canvases.length * (i + 1);
ctx.strokeStyle = `hsl(160, ${saturation}%, 60%)`;
ctx.lineWidth = 10;
ctx.strokeRect(i * 50 + 10, i * 15 + 10, 100, 80);
});
canvas {
position: absolute;
border: 1px solid black;
}
Can't comment the last answer but the fix is relatively easy. Just set the background color of your opaque canvas:
#canvas1 { background-color: black; } //opaque canvas
#canvas2 { ... } //transparent canvas
I'm not sure but it looks like that the background-color is inherited as transparent from the body.