32 lines
628 B
HTML
32 lines
628 B
HTML
<style>
|
|
#overlay {
|
|
position: absolute;
|
|
top: 150px;
|
|
left: 150px;
|
|
width: 150px;
|
|
height: 150px;
|
|
background-color: red;
|
|
opacity: 0.7;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
}
|
|
|
|
.container {
|
|
position: relative;
|
|
width: 500px;
|
|
height: 500px;
|
|
}
|
|
</style>
|
|
|
|
<div class="container">
|
|
<canvas id="myCanvas" width="500" height="500"></canvas>
|
|
<div id="overlay"><span>An HTML element</span></div>
|
|
</div>
|
|
|
|
<script>
|
|
const ctx = document.getElementById('myCanvas').getContext('2d');
|
|
ctx.fillStyle = 'blue';
|
|
ctx.fillRect(50, 50, 200, 200);
|
|
</script> |