Search code examples
javascripthtmlhtml5-canvasbackground-colorlinear-gradients

Assign a linearGradient to a canvas background color

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?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>

<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var gradient;

    function init() {
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight


        gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
        gradient.addColorStop(0, "rgb(255, 255, 255)");
        gradient.addColorStop(1, "rgb(0, 0, 0)");

        canvas.style.backgroundColor = gradient;


        ctx.beginPath();
        ctx.rect(20, 20, 1000, 1000);
        ctx.fillStyle = gradient;
        ctx.fill();

    }

    window.onload = init();
</script>

</html>

Solution

  • 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();
    <canvas id="canvas" width=400 height=150></canvas>

    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);
}
    <canvas id="canvas" width=400 height=150></canvas>