Помогите поместить елки на цветную картинку, котора получается по этому HTML-файлу

let canvas;
let canvasContext;

let x = 0,
  y = 0;
let x2 = 0,
  y2 = 0;
let Mycolor = "silver";
window.onload = function() {
  canvas = document.getElementById("canvas");
  canvasContext = canvas.getContext('2d');

  canvasContext.fillStyle = "#FFFFFF";
  canvasContext.fillRect(0, 0, canvas.width, canvas.height);

  setInterval(() => {
    // Update 20 times every frame
    for (let i = 0; i < 20; i++) {
      update();
      update2();
    }
  }, 1000 / 250); // 250 frames per second
};

function update() {

  let nextX, nextY;
  let r = Math.random();
  if (r < 0.01) {
    nextX = 0;
    nextY = 0.16 * y;
  } else if (r < 0.86) {
    nextX = 0.85 * x + 0.04 * y;
    //nextX =  0.85 * x + 0.00 * y;
    nextY = -0.04 * x + 0.85 * y + 1.6;
    Mycolor = "green";
  } else if (r < 0.93) {
    nextX = 0.20 * x - 0.26 * y;
    nextY = 0.23 * x + 0.22 * y + 1.6;
    Mycolor = "white";
  } else {
    nextX = -0.15 * x + 0.28 * y;
    nextY = 0.26 * x + 0.24 * y + 0.44;
    Mycolor = "red";
  }

  // Scaling and positioning
  let plotX = 0.33 * 0.8 * canvas.width * (x + 3) / 6;
  let plotY = 0.6 * canvas.height * (1 - (y + 2) / 14);

  drawFilledCircle(plotX, plotY, 1, Mycolor);

  x = nextX;
  y = nextY;

}

function update2() {

  let nextX2, nextY2;
  let r = Math.random();
  if (r < 0.01) {
    nextX2 = 0;
    nextY2 = 0.16 * y;
  } else if (r < 0.86) {
    //nextX2 =  0.85 * x + 0.04 * y;
    nextX2 = 0.85 * x + 0.00 * y;
    nextY2 = -0.04 * x + 0.85 * y + 1.6;
    Mycolor = "silver";
  } else if (r < 0.93) {
    nextX2 = 0.20 * x - 0.26 * y;
    nextY2 = 0.23 * x + 0.22 * y + 1.6;
    Mycolor2 = "blue";
  } else {
    nextX2 = -0.15 * x + 0.28 * y;
    nextY2 = 0.26 * x + 0.24 * y + 0.44;
    Mycolor = "red";
  }

  // Scaling and positioning
  let plotX2 = 0.33 * 0.8 * canvas.width * (x + 3) / 6 + 0.8 * 0.6 * canvas.width;
  let plotY2 = 0.6 * canvas.height * (1 - (y + 2) / 14);

  drawFilledCircle(plotX2, plotY2, 1, Mycolor);

  x2 = nextX2;
  y2 = nextY2;

}



const drawFilledCircle = (centerX, centerY, radius, color) => {
  canvasContext.beginPath();
  canvasContext.fillStyle = color;
  canvasContext.arc(centerX, centerY, radius, 0, 2 * Math.PI, true);
  canvasContext.fill();
};

#text1 {
  fill: #B2000C;
}

<canvas id="canvas" height="500" width="500"></canvas>

<svg width="50%" height="50%" viewBox="0 0 600 600" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet">
    <title>Animation of text x and y attributes</title>
    <defs>
    <linearGradient id="grad"
    x1="0" y1="0" x2="0" y2="100%"
    gradientUnits="userSpaceOnUse">
    <stop offset="2%" stop-color="steelblue"/>
    <stop offset="45%" stop-color="hsla(180, 100%, 50%, 0)"/>
    <stop offset="45%" stop-color="hsla(80, 100%, 50%, 0)"/>
    <stop offset="95%" stop-color="yellowgreen"/>
    </linearGradient>
    </defs>
    <rect width="100%" height="100%" fill="url(#grad)"/>
    
    <text x="20" y="580"
    font-size="60" fill="#E4E4E4" stroke-width="4" stroke="#E4E4E4">Happy New 2023 Year!</text>
    <text id="text1" x="20" y="500"
    font-size="60">С Новым 2023 годом!</text>
    
    </svg>