Как загрузить фоновое изображение холста HTML5?

Question

У меня есть программа, которая рандомизирует значения r, g и b для 2 цветов rgb и создает линейный градиент, смешивающий цвета. Однако единственный способ создать этот линейный градиент - установить этот градиент для фонового изображения моего холста, то есть, когда я загружаю холст, он остается пустым, потому что фоновое изображение не загружается.

CSS

.window {
  width: 500px;
  height: 500px;
  background-image: linear-gradient(to right, white, black);
}

HTML

<canvas id = 'randomgradient_canvas' class = 'window'></canvas>

JavaScript

let r1, g1 b1, r2, g2, b2;
function randomizeColors() {
  r1 = Math.random() * 255;
  g1 = Math.random() * 255;
  b1 = Math.random() * 255;
  r2 = Math.random() * 255;
  g2 = Math.random() * 255;
  b2 = Math.random() * 255;
  document.getElementById('randomgradient_canvas').style = `background-image:linear-gradient(to left, rgb(${r1}, ${g1}, ${b1}), rgb(${r2}, ${g2}, ${b2}))`;
}

И все это отлично работает для создания градиента, единственная проблема в том, что я нигде не могу найти, как загрузить фоновое изображение элемента.

Answer 1

Фон, определенный параметром CSS, не отображается в буфере холста, поэтому вы не можете получить его пиксельные данные. Однако вы можете нарисовать градиент на холсте, используя ctx.createLinearGradient(), а затем получить данные пикселей, используя ctx.getImageData или что-то еще.