Partially transparent (opacity) HTML5 Canvas drawings

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