Вставьте холст, чтобы нарисовать линии, используя веб-сайт в качестве фона

Question

Привет, ребята. Я новичок в Canvas и хотел бы нарисовать сайт, который я создаю. Это одна страница, где пользователь должен писать поверх всех показанных элементов. Теория IN довольно проста. Вот как это выглядит при увеличении на 25% в Chrome:

Следующий код относится ко всему сайту :

<canvas id="myCanvas"></canvas>
    <div class="container">
                <div class="row first-row" >
                </div>
                <div class="row second-row" >
                   <div class="col-4">
                   </div>
                   <div class="col-4">
                      <img class="img-fluid " src="img/google_arts_culture/francisco-goya-testo-googleart.jpg" draggable="false"  />
                   </div>
                   <div class="col-4">
                   </div>
                </div>
                <div class="row third-row" >
                   <div class="col-6 ">
                      <div class="col-8">
                         <p style="color:#3C4043;">2 stories</p>
                         <img class="img-fluid " src="img/google_arts_culture/2stories-googleart.png" draggable="false" />
                      </div>
                      <div class="col-4">
                      </div>
                   </div>
                   <div class="col-6">
                   </div>
                </div>
                <div class="row fourth-row no-gutters" >
                   <div id="scrollDiv" class="col-12 mt-3 mb-3 pt-3 pb-3">
                      <img src="img/google_arts_culture/lavori-goya-slider-section-googleart.jpg" draggable="false" />
                   </div>
                </div>
                <div class="row fifth-row" >
                   <div class="col-2 ">
                   </div>
                   <div class="col-8">
                      <div class="text-center" >
                         <p style="font-size:24px">"Fantasy, abandoned by reason, produces impossible monsters;<br />
                            united with it, she is the mother of the arts and the origin of <br />
                            marvels."</p>
                         <p style="font-size:18px">Francisco Goya<br />
                            Mar 30, 1746 - Apr 16, 1828</p>
                      </div>
                   </div>
                   <div class="col-2">
                   </div>
                </div>
                <div class="row sixth-row">
                   <div class="col-10 ">
                      <div class="col-12 pt-10">
                         <p style="color:#3C4043;">More artists</p>
                         <img class="img-fluid" src="img/google_arts_culture/more-artist-googleart.png" draggable="false">
                      </div>
                   </div>
                   <div class="col-2">
                   </div>
                </div>
                <div class="row seventh-row">
                   <div class="col-8 ">
                      <div class="col-12 pt-10">
                         <p style="color:#3C4043;">More art movements</p>
                         <img class="img-fluid" src="img/google_arts_culture/more-art-movements-googleart.png" draggable="false">
                      </div>
                   </div>
                   <div class="col-4">
                   </div>
                </div>
                <div class="row eighth-row">
                   <div class="col-10 ">
                      <div class="col-12 pt-10">
                         <p style="color:#3C4043;">More mediums</p>
                         <img class="img-fluid" src="img/google_arts_culture/more-mediums-googleart.png" draggable="false">
                      </div>
                   </div>
                   <div class="col-2">
                   </div>
                </div>

          </div>

Я не знаю, куда положить холст: должен ли он быть перед контейнером или внутри него. После этого у меня есть следующий код для рисования линии, и он сработал для теста, потому что внутри него есть свойство background (как вы можете видеть, я это прокомментировал). Но теперь у меня уже есть веб-сайт в качестве фона, поэтому я не могу понять, как холст может работать, показывая в качестве фона мою страницу, так что пользователь может рисовать линии при перемещении мыши:

<script>
   // disable right click
   document.addEventListener('contextmenu', event => event.preventDefault());

   // Create a canvas
   var canvas = document.getElementById("myCanvas"),
   ctx = canvas.getContext("2d");

   // Give dimensions to the canvas
   canvas.width = 100%;
   canvas.height = 100%;

   // Use a background image for the canvas
   // var background = new Image();
   // background.src = "img/Onepage_Desktop.png";

   // draw the image on the canvas onload document
   background.onload = function() {
     ctx.drawImage(background, 0, 0);
   }

   // draw two lines

   var clicks = 0;
   var lastClick = [0, 0];

   // add event Listener for the click
   document.getElementById('myCanvas').addEventListener('mousemove', drawLine, false);

   // get the coordinates of the cursor
   function getCursorPosition(e) {
       var x;
       var y;

       if (e.pageX != undefined && e.pageY != undefined) {
           x = e.pageX;
           y = e.pageY;
       } else {
           x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
           y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
       }

       return [x, y];
   }

   // function to draw the line
   function drawLine(e) {
       context = this.getContext('2d');

       x = getCursorPosition(e)[0] - this.offsetLeft;
       y = getCursorPosition(e)[1] - this.offsetTop;

       if (clicks != 1) {
           clicks++;
       } else {
           context.beginPath();
           context.moveTo(lastClick[0], lastClick[1]);
           context.lineTo(x, y, 6);
           context.lineJoin = 'round';
           context.lineCap = 'round';
           context.lineWidth = 15;
           context.fillStyle = "#000000";
           context.strokeStyle = '#000000';
           context.stroke();

           clicks = 0;
       }

       lastClick = [x, y];
   }


</script>

Спасибо за всех, кто может помочь мне разобраться в этой проблеме. :)