I have a text under canvas, i want to show it when i am erasing background color of canvas. Now it is red, when i wrote transparent it does not work. I need to show that text when i draw with the mouse. I tried with rgba too, but is was not working.

please help me if you can

```
enter code here

```

```js
var cont = document.getElementById("spots"),      // UI elements
    canvas = document.getElementById("canvas"),
    alpha = document.getElementById("alpha"),
    modes = document.getElementById("modes"),
    ctx = canvas.getContext("2d"),
    isDown = false,                               // defaults
    color = "red";

// set up color palette using a custom "Spot" object
// This will use a callback function when it is clicked, to
// change current color
function Spot(color, cont, callback) {
    var div = document.createElement("div");
    div.style.cssText = "width:50px;height:50px;border:1px solid #000;margin:0 1px 1px 0;background:" + color;
    div.onclick = function() {callback(color)};
    cont.appendChild(div);
}

// add some spot colors to our palette container
new Spot(color, cont, setColor);

// this will set current fill style based on spot clicked
function setColor(c) {ctx.fillStyle = c}

// setup defaults
ctx.fillStyle = color;
ctx.globalAlpha = 1;

// events
canvas.onmousedown = function() {isDown = true};
window.onmouseup = function() {isDown = false};
window.onmousemove = function(e) {
    if (!isDown) return;
    var r = canvas.getBoundingClientRect(),
        x = e.clientX - r.left,
        y = e.clientY - r.top;

    ctx.beginPath();
    ctx.arc(x, y, 25, 0, 2*Math.PI);
    ctx.fill();
};
```

```css
.main-content{
  position: relative;
  width: 300px;
  height: 300px;
}
.main-text{
  position: absolute;
  right: 0;
  left: 0;
  text-align: center;
  z-index: 8;
  font-size: 35px;
}
#canvas{
  background-color: green;
  position: absolute;
  z-index: 9;
}
```

```html
<div class="main-content">
    <p class="main-text">You Won!!!</p>
    <canvas id="canvas" width=300 height=300 style="border: 1px solid green;"></canvas>
    <div id="spots"></div>
</div>
```