<canvas id="canvas" width="800" height="500" style="border:1px solid #666;display:block;margin:0 auto">
    當前瀏覽器不支持canvas，請更換瀏覽器後再試。
</canvas>

window.onload = function(){
    var canvas = document.getElementById(‘canvas‘);
    var context = canvas.getContext(‘2d‘);

    context.beginPath();
    context.arc(
 
400, 250, 50, 0, 2*Math.PI, true);//圓A
    context.arc(400, 250, 100, 0, 2*Math.PI, false);//圓B
    //設true方向為1，fasle方向為-1，假設在圓A內部有一條射線與圓A、B邊相交，兩者方向相加為0，則圓A內部為繪制內容的外側，反之則相反。
    context.closePath();
    context.fillStyle = "#058";
    context.shadowColor = ‘gray‘;
    context.shadowOffsetX = 5;
    context.shadowOffsetY 
 
= 5;
    context.shadowblur = 10;
    context.fill();
}

非零環繞