Assign a linearGradient to a canvas background color

Question

I have created a gradient, and wish to make it the background color of the canvas, but the canvas doesn't work with it. the rectangle which I drew to ensure the validity of the gradient works just fine however. What is wrong here, can you simply not make a background color a gradient?

Do I have to resort to drawing a rectangle over the entirety of the canvas instead?

user_7599833 · Answer

You are mixing CSS style gradients with canvas gradients, they are two different things:

You can do the same linear gradient trick both ways, draw a rectangle that is the full size of the canvas or apply the gradient via css, below are samples just pick your favorite.

I added a few circles and lines to show something more in the canvas

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

function drawBackground() {
  var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
  gradient.addColorStop(0, "rgb(255, 255, 255)");
  gradient.addColorStop(1, "rgb(0, 0, 0)");

  ctx.rect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = gradient;
  ctx.fill()
}

function drawCircles() {
  for (var i = 2; i < 8; i++) {
    ctx.beginPath();
    ctx.arc(i * 30, i * 8, 10, 0, 8);
    ctx.stroke()
  }
}

function drawLines() {
  for (var i = 1; i < 8; i++)
    ctx.lineTo(i ** 3, i * 20, 10, 0, 8);
  ctx.stroke()
}

function init() {
  drawBackground()
  drawCircles()
  drawLines()
}

window.onload = init();

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

function drawCircles() {
  for (var i = 2; i < 8; i++) {
    ctx.beginPath();
    ctx.arc(i * 30, i * 8, 10, 0, 8);
    ctx.stroke()
  }
}

function drawLines() {
  for (var i = 1; i < 8; i++)
    ctx.lineTo(i ** 3, i * 20, 10, 0, 8);
  ctx.stroke()
}

function init() {
  drawCircles()
  drawLines()
}

window.onload = init();

canvas {
  background-image: linear-gradient(to right, white, black);
}

Assign a linearGradient to a canvas background color

1 Answers