Question

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.

Answer 1

Simply use rgba(r, g, b, a) (where a is your alpha transparency from 0 (completely transparent) to 1 (completely opaque):

myContext.fillStyle = "rgba(0, 0, 0, 0.5)";

Examples:

• https://developer.mozilla.org/samples/canvas-tutorial/4_4_canvas_rgba.html
• https://developer.mozilla.org/en/drawing_graphics_with_canvas