Is it possible to create partially transparent elements on the fly in canvas? Currently I'm setting the whole canvas element's opacity in CSS, but I want to some elements to be more visible then others.
Nothing I've found so far indicates that this is possible.
Is it possible to create partially transparent elements on the fly in canvas? Currently I'm setting the whole canvas element's opacity in CSS, but I want to some elements to be more visible then others.
Nothing I've found so far indicates that this is possible.
Share Improve this question edited Jul 11, 2010 at 19:06 Josh K asked Jul 11, 2010 at 16:57 Josh KJosh K 28.9k20 gold badges88 silver badges132 bronze badges1 Answer
Reset to default 8Simply use rgba(r, g, b, a) (where a is your alpha transparency from 0 (pletely transparent) to 1 (pletely opaque):
myContext.fillStyle = "rgba(0, 0, 0, 0.5)";
Examples:
- https://developer.mozilla/samples/canvas-tutorial/4_4_canvas_rgba.html
- https://developer.mozilla/en/drawing_graphics_with_canvas