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?
JavaScript
x
42
42
1
<!DOCTYPE html>2
<html lang="en">3
4
<head>5
<meta charset="UTF-8">6
<meta http-equiv="X-UA-Compatible" content="IE=edge">7
<meta name="viewport" content="width=device-width, initial-scale=1.0">8
<title>test</title>9
</head>10
11
<body>12
<canvas id="canvas"></canvas>13
</body>14
15
<script>16
var canvas = document.getElementById("canvas");17
var ctx = canvas.getContext("2d");18
var gradient;19
20
function init() {21
canvas.width = window.innerWidth22
canvas.height = window.innerHeight23
24
25
gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);26
gradient.addColorStop(0, "rgb(255, 255, 255)");27
gradient.addColorStop(1, "rgb(0, 0, 0)");28
29
canvas.style.backgroundColor = gradient;30
31
32
ctx.beginPath();33
ctx.rect(20, 20, 1000, 1000);34
ctx.fillStyle = gradient;35
ctx.fill();36
37
}38
39
window.onload = init();40
</script>41
42
</html>Advertisement
Answer
You are mixing CSS style gradients with canvas gradients, they are two different things:
- https://www.w3schools.com/css/css3_gradients.asp
- https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient
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
JavaScript
1
34
34
1
var canvas = document.getElementById("canvas");2
var ctx = canvas.getContext("2d");3
4
function drawBackground() {5
var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);6
gradient.addColorStop(0, "rgb(255, 255, 255)");7
gradient.addColorStop(1, "rgb(0, 0, 0)");8
9
ctx.rect(0, 0, canvas.width, canvas.height);10
ctx.fillStyle = gradient;11
ctx.fill()12
}13
14
function drawCircles() {15
for (var i = 2; i < 8; i++) {16
ctx.beginPath();17
ctx.arc(i * 30, i * 8, 10, 0, 8);18
ctx.stroke()19
}20
}21
22
function drawLines() {23
for (var i = 1; i < 8; i++)24
ctx.lineTo(i ** 3, i * 20, 10, 0, 8);25
ctx.stroke()26
}27
28
function init() {29
drawBackground()30
drawCircles()31
drawLines()32
}33
34
window.onload = init();JavaScript
1
1
1
<canvas id="canvas" width=400 height=150></canvas>JavaScript
1
23
23
1
var canvas = document.getElementById("canvas");2
var ctx = canvas.getContext("2d");3
4
function drawCircles() {5
for (var i = 2; i < 8; i++) {6
ctx.beginPath();7
ctx.arc(i * 30, i * 8, 10, 0, 8);8
ctx.stroke()9
}10
}11
12
function drawLines() {13
for (var i = 1; i < 8; i++)14
ctx.lineTo(i ** 3, i * 20, 10, 0, 8);15
ctx.stroke()16
}17
18
function init() {19
drawCircles()20
drawLines()21
}22
23
window.onload = init();JavaScript
1
3
1
canvas {2
background-image: linear-gradient(to right, white, black);3
}JavaScript
1
1
1
<canvas id="canvas" width=400 height=150></canvas>