Intergrating background images on PHPRad

Good Day Everyone, I have a PHPrad project I am working on, I am fairly new to PHPRad so I am struggling a bit with my html canvas tag.

Problem

I am using custom view option to add ny script tag and it does not seem to work. I am also using a custom HTML Page. I want to add an html 5 canvas tag and set its background to an image I uploaded online, When I do so, nothing shows up and despite trying to prevent the drawing and erasing button from automatically submitting the form when clicked, the buttons do submit the form

Here is the Code.
HTML

`<div class="canvases">
                <!-- Corolla Canvas -->
                <div class="corolla-canvas">
                  <input type="hidden" name="corolla_data" value="" />
                  <div class="buttons-container">
                    <button id="corollax-draw" class="form-button">
                      Free Drawing
                    </button>
                    <button id="corollax-remove" disabled="disabled">Remove</button>
                  </div>
                  <canvas
                    id="corolla-canvas"
                    width="650px"
                    height="330px"
                    name="corolla_data"
                  ></canvas>
                </div>
                  </canvas>
                </div>
`

javascript

<script>

alert('testing if the script is well connected')


const canvas = document.getElementById("corolla-canvas");
const ctx = canvas.getContext("2d");

const img = new Image();
img.src = "https://i.ibb.co/QF5k508/Removal-69.png";
img.onload = function () {
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};

let isDrawing = false;
let isErasing = false;

const drawButton = document.getElementById("corollax-draw");
const removeButton = document.getElementById("corollax-remove");

drawButton.addEventListener("click", function () {
  removeButton.disabled = false;
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  canvas.addEventListener("mousedown", startDrawing);
  canvas.addEventListener("mousemove", draw);
  canvas.addEventListener("mouseup", endDrawing);
});

removeButton.addEventListener("click", function () {
  drawButton.disabled = false;
  ctx.globalCompositeOperation = "destination-out";
  canvas.addEventListener("mousedown", startErasing);
  canvas.addEventListener("mousemove", erase);
  canvas.addEventListener("mouseup", endErasing);
});

function startDrawing(e) {
  isDrawing = true;
  ctx.beginPath();
  ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
}

function draw(e) {
  if (isDrawing) {
    ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
    ctx.stroke();
  }
}

function endDrawing(e) {
  isDrawing = false;
}

function startErasing(e) {
  isErasing = true;
  ctx.beginPath();
  ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
}

function erase(e) {
  if (isErasing) {
    ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
    ctx.stroke();
  }
}

function endErasing(e) {
  isErasing = false;
  ctx.globalCompositeOperation = "source-over";
}

drawButton.addEventListener("click", function (event) {
  event.preventDefault();
  removeButton.disabled = false;
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  canvas.addEventListener("mousedown", startDrawing);
  canvas.addEventListener("mousemove", draw);
  canvas.addEventListener("mouseup", endDrawing);
});

removeButton.addEventListener("click", function (event) {
  event.preventDefault();
  drawButton.disabled = false;
  ctx.globalCompositeOperation = "destination-out";
  canvas.addEventListener("mousedown", startErasing);
  canvas.addEventListener("mousemove", erase);
  canvas.addEventListener("mouseup", endErasing);
});


</script>

Here are my image of how it all looks when I preview it.. I want the image to show and the draw and remove buttons to function acordingly instead of submitting the form: