Update documentation and version

Author: Masth0

docs/.vuepress/components/brush-circle.vue

@@ -70,7 +70,7 @@
         import('../../../build/scratchcard.min').then(() => {
           const scContainer = document.getElementById('js--sc--container')
           const scInfos = document.querySelector('.sc__infos');
-          const sc = new ScratchCard('#js--sc--container', {
+          const sc = new ScratchCard(scContainer, {
             scratchType: SCRATCH_TYPE.CIRCLE,
             containerWidth: scContainer.offsetWidth,
             containerHeight: 300,

docs/.vuepress/components/brush-html.vue

@@ -131,7 +131,7 @@
         import('../../../build/scratchcard.min').then(() => {
           const scContainer = document.getElementById('js--sc--container')
           const scInfos = document.querySelector('.sc__infos');
-          const sc = new ScratchCard('#js--sc--container', {
+          const sc = new ScratchCard(scContainer, {
             scratchType: SCRATCH_TYPE.CIRCLE,
             containerWidth: scContainer.offsetWidth,
             containerHeight: 300,

docs/.vuepress/components/brush-img.vue

@@ -71,7 +71,7 @@
         import('../../../build/scratchcard.min').then(() => {
           const scContainer = document.getElementById('js--sc--container')
           const scInfos = document.querySelector('.sc__infos');
-          const sc = new ScratchCard('#js--sc--container', {
+          const sc = new ScratchCard(scContainer, {
             scratchType: SCRATCH_TYPE.BRUSH,
             containerWidth: scContainer.offsetWidth,
             containerHeight: 300,

docs/.vuepress/components/brush-line.vue

@@ -70,7 +70,7 @@
         import('../../../build/scratchcard.min').then(() => {
           const scContainer = document.getElementById('js--sc--container')
           const scInfos = document.querySelector('.sc__infos');
-          const sc = new ScratchCard('#js--sc--container', {
+          const sc = new ScratchCard(scContainer, {
             scratchType: SCRATCH_TYPE.LINE,
             containerWidth: scContainer.offsetWidth,
             containerHeight: 300,

docs/.vuepress/components/brush-spray.vue

@@ -70,7 +70,7 @@
         import('../../../build/scratchcard.min').then(() => {
           const scContainer = document.getElementById('js--sc--container')
           const scInfos = document.querySelector('.sc__infos');
-          const sc = new ScratchCard('#js--sc--container', {
+          const sc = new ScratchCard(scContainer, {
             scratchType: SCRATCH_TYPE.SPRAY,
             containerWidth: scContainer.offsetWidth,
             containerHeight: 300,

docs/readme.md

@@ -18,6 +18,26 @@ import 'scratchcard-js';
 ```
 
 ## Configuration
+::: Tip
+The first argument of the ScratchCard instance can be a string or an HTMLElement.
+:::
+
+```js{2}
+const scContainer = document.getElementById('js--sc--container');
+const sc = new ScratchCard(scContainer, {
+    scratchType: SCRATCH_TYPE.LINE,
+    containerWidth: scContainer.offsetWidth,
+    containerHeight: 300,
+    imageForwardSrc: '/images/scratchcard.jpg',
+    imageBackgroundSrc: '/images/result.png',
+    htmlBackground: '',
+    clearZoneRadius: 20,
+    nPoints: 0,
+    pointSize: 0,
+    callback: function () {}
+})
+```
+
 See the SCRATCH_TYPES in action: [Line](/brushes/line), [Spray](/brushes/spray), [Circle](/brushes/circle), [Brush](/brushes/brush)
 | Name  | Type | Default value | Comment |
 |---|---|---|---|

package.json

@@ -1,6 +1,6 @@
 {
   "name": "scratchcard-js",
-  "version": "1.4.10",
+  "version": "1.5.0",
   "description": "Create scratch card in browser.",
   "main": "./build/scratchcard.min.js",
   "scripts": {