SOURCE

let drawing = document.getElementById("drawing");
if(drawing.getContext) {
    let context = drawing.getContext("2d");

    // 绘制红色矩形
    context.fillStyle = "#ff0000";
    context.fillRect(10,10,50,50);

	// 设置全局透明度
    context.globalAlpha = 0.5;

	// 绘制蓝色矩形
    context.fillStyle = "rgba(0,0,255,1)";
    context.fillRect(30,30,50,50);

    // 重置全局透明度
    context.globalAlpha = 1;

    context.fillStyle = "rgb(0,255,0,1)";
    context.fillRect(20,20,50,50);

}

<canvas width="100" height="100" id="drawing">drawing</canvas>