if (context && "globalAlpha" in context)

{

    // disegno un rettangolo di un determinato blu

    context.fillStyle = "#07E";

    context.fillRect(0, 0, 200, 300);

    // disegno un rettangolo di un determinato verde

    context.fillStyle = "#7D0";

    context.fillRect(200, 0, 200, 300);

    // disegno un rettangolo di un determinato rosso

    context.fillStyle = "#F50";

    context.fillRect(400, 0, 200, 300);

    // applico un valore di trasparenza

    context.globalAlpha = 0.4;

    // disegno una barra orizzontale sul giallino...

    // con la trasparenza 

    context.fillStyle = "#FE0";

    context.fillRect(0, 100, 600, 100);

}

var composite_operations =

[

    "source-over", "source-in", "source-out", "source-atop",

    "destination-over", "destination-in", "destination-out", "destination-atop",

    "lighter", "darker", "copy", "xor"

];

for (var ix = 0; ix < composite_operations.length; ix++)

{

    // creo l'oggetto canvas

    var canvas = document.createElement("canvas");

    // imposto gli attributi

    canvas.setAttribute("width", "100");

    canvas.setAttribute("height", "100");

    canvas.className = "multicanvas";

    var div = document.getElementById("pc");

    // lo appendo al div placeholder

    div.appendChild(canvas);

    if (canvas && HTML5.Features.hasCanvas())

    {

        // ottengo il contesto 2D

        var context = canvas.getContext("2d");

        // verifico se posso usare gli attributi di compositing

        if (context && "globalCompositeOperation" in context)

        {

            // rettangolo destinazione

            context.fillStyle = "#00F";

            context.fillRect(1, 1, 60, 60);

            // imposto l'attributo di composizione

            context.globalCompositeOperation = composite_operations[ix];

            // cerchio sorgente

            context.fillStyle = "#0F0";

            context.beginPath();

            context.arc(50, 50, 30, 0, Math.PI * 2, false);

            context.fill();

            // reset del compositing

            context.globalCompositeOperation = "source-over";

            // testo

            context.fillStyle = '#000';

            context.font = "bold 10px Verdana";

            context.fillText(composite_operations[ix], 1, 95);

        }

    }

}