scratch-box-js/docs/brushes/html-bg.md

Create scratch card in browser.

# HTML background

<brush-html></brush-html>

## html
```html
<div class="sc__wrapper">
    <!-- scratchcard -->
    <div id="js--sc--container" class="sc__container">
        <!-- background image insert here by scratchcard-js -->
        <!-- canvas generate here -->
    </div>
    <!-- infos -->
    <div class="sc__infos">
        <!-- percent -->
    </div>
</div>
```

## css
 ```css
/* ----------------------------------------------
 * Generated by Animista on 2019-11-20 21:37:4
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation rotate-scale-up
 * ----------------------------------------
 */
@-webkit-keyframes rotate-scale-up {
    0% {
        -webkit-transform: scale(1) rotateZ(0);
        transform: scale(1) rotateZ(0);
    }
    50% {
        -webkit-transform: scale(2) rotateZ(180deg);
        transform: scale(2) rotateZ(180deg);
    }
    100% {
        -webkit-transform: scale(1) rotateZ(360deg);
        transform: scale(1) rotateZ(360deg);
    }
}
@keyframes rotate-scale-up {
    0% {
        -webkit-transform: scale(1) rotateZ(0);
        transform: scale(1) rotateZ(0);
    }
    50% {
        -webkit-transform: scale(2) rotateZ(180deg);
        transform: scale(2) rotateZ(180deg);
    }
    100% {
        -webkit-transform: scale(1) rotateZ(360deg);
        transform: scale(1) rotateZ(360deg);
    }
}
.sc__inner {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.sc__wrapper {
    display: block;
    width: 100%;
    height: 300px;
    max-width: 300px;
    margin: 0 auto;
    border: 5px solid white;
}

.sc__container {
    position: relative;
    overflow: hidden;
    height: 300px;
    max-width: 300px;
}

.sc__container > img {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

.sc__container canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

.sc__infos {
    text-align: center;
    height: 40px;
    line-height: 40px;
    margin-top: 5px;
    font-weight: bold;
    font-size: 18px;
}

.inner_html {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(red, yellow, green);
    display: table;
}

.inner_html p {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    -webkit-animation: rotate-scale-up 1s linear infinite both;
    animation: rotate-scale-up 1s linear infinite both;
}
```
## Javascript
```js{4,10,11,12}
const scContainer = document.getElementById('js--sc--container')
const scInfos = document.querySelector('.sc__infos');
const sc = new ScratchCard('#js--sc--container', {
  scratchType: SCRATCH_TYPE.CIRCLE,
  containerWidth: scContainer.offsetWidth,
  containerHeight: 300,
  brushSrc: '',
  imageForwardSrc: '/images/scratchcard.jpg',
  imageBackgroundSrc: '',
  htmlBackground: `<div class="inner_html"><p>Html content</p></div>`,
  clearZoneRadius: 30,
  nPoints: 50,
  pointSize: 4,
  callback: function () {
    alert('Now the window will reload !')
    window.location.reload()
  }
})

// Init
sc.init().then(() => {
  sc.canvas.addEventListener('scratch.move', () => {
    let percent = sc.getPercent().toFixed(0);
    scInfos.innerHTML = percent + '%';
    console.log(percent)
  })
}).catch((error) => {
  // image not loaded
  alert(error.message);
});
```