Htmlキャンバスオーバーレイでコンテンツを無効にしない

Question

赤い枠線で定義されたキャンバスを、その下にあるdiv（黒い枠線）に配置したいとします。 divと同じサイズにする必要があります。私はまた、ボタンをクリックして、キャンバスの下にあるテキストを選択できるようにしたいと思います。 私は今、2日間のためにこれをやろうとしてきたし、それを把握することはできません...

<canvas id="canvas"> 

</canvas> 
<div class="jumbotron"> 
    <div class="container-fluid" id="canvas-container"> 
    </div> 
</div> 

現在のCSS（私はそれが混乱だけど、私は多くのことをしようとしています

ここ

canvas { 
    pointer-events:none; 
} 

は次のとおりです。

html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    /* Margin bottom by footer height */ 
    margin-bottom: 60px; 
    margin-top: 50px; /* Required margin for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */ 
} 
.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    /* Set the fixed height of the footer here */ 
    height: 60px; 
    background-color: #f5f5f5; 
} 


/* Custom page CSS 
-------------------------------------------------- */ 
/* Not required for template or sticky footer method. */ 

body > .container { 
    padding: 60px 15px 0; 
} 
.container .text-muted { 
    margin: 20px 0; 
} 

.footer > .container { 
    padding-right: 15px; 
    padding-left: 15px; 
} 

code { 
    font-size: 80%; 
} 

.jumbotron 
{ 
    text-align: center; 
} 
#canvas-container 
{ 
    padding: 0; 
    //position: absolute; 
    border: 1px solid black; 
} 
.jumbotron 
{ 
    padding: 0; 
    #position: absolute; 
} 

canvas { 
    border: 1px solid red; 
} 

Answer 1

）もののことを指定する必要がありますあなたはブラックボックスがどこにある赤いボックスの下の領域をクリックしてテストすることができますJSフィドル：

https://jsfiddle.net/1n1bp7m9/1/