Scratch card in website doesnt work in android

I'm trying to do a scratch game at the last picture of a automatic slider
I took as an example this slider : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto
And i took as an example this scratch card : https://codepen.io/andreruffert/pen/pvqly So i assembled them, and my code look like this:

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");

  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 6}    
  slides[slideIndex-1].style.display = "block";  
  setTimeout(showSlides, 500); // Change image every 2 seconds
}


var promoCode ='';
  function handlePercentage(filledInPixels) {
    filledInPixels = filledInPixels || 0;
    console.log(filledInPixels + '%');
    if (filledInPixels > 15) {
      canvas.parentNode.removeChild(canvas);
      $('.promo-container').show();
      $('body').removeClass('not-selectable');
      $('.promo-code').html(promoCode);
    }
  }

<div class="container-fluid" >
            <div class="row">
                <div class="col-md-12">
                    <div class="slideshow-container">
                        <div class="mySlides">
                          <img class ="rounded-circle" src="image1.jpg">
                        </div>

                        <div class="mySlides">
                          <img class ="rounded-circle" src="image2.jpg">
                        </div>

                        <div class="mySlides">
                          <img class ="rounded-circle" src="image3.jpg">
                        </div>

                        <div class="mySlides">
                          <img class ="rounded-circle" src="image4.jpg">
                        </div>

                        <div class="mySlides">
                          <img class ="rounded-circle" src="image5.jpg">
                        </div>
                
                        <div class="mySlides" id="scratch">
                            <div class="container carte" id="js-container">
                                <canvas class ="rounded-circle canvas" id="js-canvas" width="300" height="300"></canvas>
                                <img class ="rounded-circle" src="win.jpg" alt="win">
                              
                            </div>             
                        </div>
                    </div>
            <div class="promo-container" style="display:none;">
                <div class="promo-code"></div>
                    <button type="button" class="btn"></button>
            </div>  
            </div>
        </div>
    </div>

In Js i just change the slideindex to stay in the last picture and i add an event when the card is scratch

It just doesnt work in android.
What can I change so that it works on android