handle spider interactive animation

blocks/welcome-banner.php

 <?php if (get_field('enable_welcome_banner_section')) : ?>
-<section class="bg-secondary background-dark py-80 HOME TOP-BANNER-SECTION">
+    <section class="bg-secondary background-dark py-80 HOME TOP-BANNER-SECTION">
         <div class="container">
             <div class="row align-items-center">
                 <div class="col-lg-5 col-md-5 col-12 mx-auto left-text">
@@ -42,16 +42,22 @@
                     endif; ?>
                 </div>
                 <div class="col-lg-6 col-md-6 col-12 mx-auto">
-                <?php
+                    <?php $enable_interactive_spider = get_field('enable_interactive_spider')?:'';
+                    if (isset($enable_interactive_spider) && $enable_interactive_spider):
+                    ?>
+                        <canvas id="scratch" style="width: 500px; height: 400px;"></canvas>
+                    <?php else:
                         $image = get_field('banner_image');
-                    $size = 'full'; // (thumbnail, medium, large, full or custom size)
+                        $size = 'full';
                         if ($image) {
                             echo wp_get_attachment_image($image, $size);
-                    } ?>
+                        }
+                    endif;
+                    ?>
                 </div>
             </div>
         </div>
-</section>
+    </section>
 <?php endif; ?>
 
 <script type="text/javascript" src="https://widget.clutch.co/static/js/widget.js"></script>
\ No newline at end of file