如何下载 HTML5 canvas 的背景图片？

Question

I have a program that randomizes the r, g, and b values for 2 rgb colors and creates a linear gradient mixing the colors. However, the only way I can create that linear gradient is by setting the background-image of my canvas to that gradient, meaning when I download the canvas, it is blank, because the background image isn't dowloaded.

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}))`;
}

And this all works perfectly for making the gradient, the only problem is I can't find anywhere how to download an element's background image.

Answer 1

The background defined by CSS is not drawn onto the canvas buffer, thus you can't get the pixel data of it. However, you can draw a gradient to the canvas using ctx.createLinearGradient() and then get the pixel data using ctx.getImageData or something else.