Как сделать чтобы сanvas не вылазил за предел бэкраунда?

Чтобы предотвратить "вылезание" элемента <canvas> за пределы фона, вам нужно правильно настроить свойства CSS для этого элемента и контейнера, в котором он находится.

Первоначально, убедитесь, что ваш элемент <canvas> находится внутри элемента-контейнера с заранее заданным размером (как минимум, с размерами фона или области отображения, в которую вы хотите поместить <canvas>). Например, вы можете использовать <div> в качестве контейнера.

Далее, задайте размеры контейнера с помощью свойства CSS width и height, и укажите position: relative, чтобы задать относительное позиционирование элементов внутри контейнера. Например:

.container {
  width: 500px;
  height: 300px;
  position: relative;
}

Затем, укажите размеры <canvas> с помощью атрибутов HTML width и height, и установите следующие свойства CSS:

canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Свойства position: absolute; и top: 0; left: 0; заставят <canvas> занимать всю доступную область контейнера. Затем, свойства width: 100%; и height: 100%; делают размеры <canvas> равными размерам области контейнера.

Теперь, <canvas> будет полностью вписываться в контейнер, и не будет вылазить за его пределы. Область отображения или фон контейнера будет ограничивать <canvas> внутри себя.

Пример HTML-разметки:

<div class="container">
  <canvas width="500" height="300"></canvas>
</div>

Пример CSS-стилей:

.container {
  width: 500px;
  height: 300px;
  position: relative;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Обратите внимание, что вы можете настроить размеры контейнера и <canvas> в зависимости от ваших потребностей - приведенные примеры являются лишь иллюстрацией.