

お世話になります。

[code]

    <div>
    <canvas id="c1">
    <canvas id="c2">
    </div>
    
[/code]

上記の様にcanvas要素を重ねて、c1に背景画像を描写し  
c1の上にc2を設置して、この２つが重なった部分を透過した(親DIVの背景色が見える)ような状態を作成することは可能でしょうか。

1つのcanvasならばglobalCompositeOperationのsource-outで可能とは見たのですが  
c2をabsolute属性で自由に配置したいので質問させていただきました。

現在この方法を調査中なので、ソースコードはまだありません・・・


CC BY-SA 3.0
2017-11-17T08:37:24.593
39649
2019-09-14T08:16:58.493
2019-09-14T08:16:58.493
32986
26241
question
javascript html5-canvas
canvas要素を重ねて、重なった部分を透過処理


ひとつのcanvasに画像をずらして配置してglobalCompositeOperationはxorで実現はできるかと思います。  
画像でではないですが参考になれば幸いです。

[code]

    var canvas = document.getElementById('c')
    var ctx = canvas.getContext('2d')
    
    ctx.globalCompositeOperation = 'xor'
    ctx.fillStyle = "rgb(200, 0, 0)"
    ctx.fillRect(20, 30, 60, 40)
    
    ctx.fillStyle = "rgb(100, 0, 0)"
    ctx.fillRect(60, 60, 60, 40)
[/code]

[code]

    .wrapper {
      background-color: #000;
    }
[/code]

[code]

    <div class="wrapper">
      <canvas id="c" width="200" height="200"></canvas>
    </div>
[/code]


CC BY-SA 4.0
2018-08-24T16:33:27.383
47793
2018-08-24T16:33:27.383
29854
39649
answer