I've drawn some shapes to my transparent canvas.
Lots of animated circles to be precise.
I would like to fade the bottom edge of my canvas to fully transparent, from transparent (but with the shapes).
Edit
See the image below; I'm after the effect on the right, as opposed to what I currently have which is a cut in half circle using clearRect()
Anyone have an ideas?
You can create a gradient with alpha in it (using rgba() syntax) and apply it to the stroke. Something like:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0,"#f00");
gradient.addColorStop(0.75,"rgba(255, 0, 0, 0)");
ctx.strokeStyle = gradient;
ctx.lineWidth = 10;
ctx.beginPath();
ctx.arc(150, 150, 100, 0, Math.PI * 2);
ctx.stroke();
Here's a quick demo for it: http://codepen.io/codingcampbell/pen/wMeowa
Changing the 0.75 value in addColorStop is what would affect where the alpha part of the gradient comes in. Animating it might be tricky, I think you need to create a new gradient for each stop value because you can't modify existing stops (but you can keep those gradients in memory and share them with all your shapes)
The easiest way would be to make a small vertical gradient and apply it as an eraser on the full circle. To make the effect that it's being animated, just move it upwards on every frame (and start from below the circle).
Related
I have a car image and i need to blink effect on its tyres and glasses with the help of canvas.
For that i used canvas draw image function and it is working fine but problem is when i hover on tyre tab tyres should be blink and when i hover on glass tab glasses should be blink but it happens only once.
Like if i hover first on tyre tab then it blinks using blink function but when i mouseout and hover on glass tab this time also blink effect but on tyres(on first hover tab) not on glasses, because in my code it draw image once until that has different functions for both.
I searched many answers on online but unable to achieve that. I already used clearRect function but i think by this my first image is not removing.
I am creating an image with this code:
context.clearRect(0, 0, canvas.width, canvas.height);
context.save();
context.drawImage(mask, 0, 0); //mask
context.fillStyle= ""; //fill color style
context.fillStyle= "#6600ee"; //fill color style
context.fillRect(0, 0, canvas.width, canvas.height);
context.globalCompositeOperation = "destination-atop";
context.drawImage(shadow, 0, 0); //shadow
context.drawImage(glossreflection, 0, 0); //reflection
context.restore();
and try to remove on mouse out By:
context.clearRect(0, 0, canvas.width, canvas.height);
I put alerts also that all are working but i am not understanding about this issue.
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.
Let's say I draw an HTML5 element of rectangle using this:
context.clearRect(25, 72, 32, 32);
How would I make it 50% transparent?
Use globalAlpha. You'll also have to draw with fillRect. clearRect just erases pixels. It can't partially erase so you'll have to use fillRect or other drawing primitives.
from w3schools.com:
ctx.globalAlpha = 0.2;
ctx.fillRect(50,50,75,50);
ctx.globalAlpha = 1.0;
ClearRect removes what was there and leaves it blank. The best way is to use a rgba fillStyle value as it will only make the rectangle (or any other shape that you are drawing) transparent. The code would be:
ctx.fillStyle = 'rgba(225,225,225,0.5)';
ctx.fillRect(25,72,32,32);
(thanks How to change the opacity (alpha, transparency) of an element in a canvas element after it has been drawn?)
Is there a way use javascript, css, canvas or svg to create an animated mask (can be just binary).
The closest I've come is using this:
var data = canvas.toDataURL();
$('#masked').css("-webkit-mask-image","url("+data+")");
But this only works in chrome and safari and is a bit buggy.
Is there a way of using css to draw a really simple triangular mask?
If its going to be dynamic you can do it with canvas, draw the path you want and fill it, by default canvas is transparent, so any of the parts not filled will show the element underneath. However if its going to be a static mask I suggest just using a png.
Live Demo
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
canvas.width = canvas.height = 200;
// make a path for a triangle
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(200,0);
ctx.lineTo(200,200);
ctx.lineTo(100,50);
ctx.lineTo(0,200);
ctx.lineTo(0,0);
ctx.fill();
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.