Menu
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?
716
The fillRect() method draws a "filled" rectangle. The default color of the fill is black. Tip: Use the fillStyle property to set a color, gradient, or pattern used to fill the drawing.
Changing the opacity of the background color only To achieve this, use a color value which has an alpha channel—such as rgba. As with opacity , a value of 1 for the alpha channel value makes the color fully opaque. Therefore background-color: rgba(0,0,0,. 5); will set the background color to 50% opacity.
In the Canvas Layer Editor window (Windows > Editors > Canvas Layer Editor ), click on the image layer's and drag up (higher opacity) or down (lower opacity).
The globalAlpha property returns the transparency value of drawing. The value 1.0 of this property specifies no transparency and the value 0.0 of this property specifies full transparency. Hence, by setting the globalAlpha property to 0.0, we can get a transparent canvas.
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?)
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
