html canvas draw line gradient

SubZero answered on March 9, 2023 Popularity 3/10 Helpfulness 4/10

answer html canvas draw line gradient

html canvas draw line gradient

Comment

<!DOCTYPE html>
<html>
<head>
	<title>Canvas Example</title>
</head>
<body>
	<canvas id="myCanvas" width="200" height="100"></canvas>

	<script>
		// get the canvas element
		var canvas = document.getElementById("myCanvas");

		// get the context for drawing
		var ctx = canvas.getContext("2d");

		// create a linear gradient for the line
		var gradient = ctx.createLinearGradient(0, 0, 200, 100);
		gradient.addColorStop(0, "red");
		gradient.addColorStop(1, "blue");

		// draw a line with gradient
		ctx.beginPath();
		ctx.moveTo(0, 0);
		ctx.lineTo(200, 100);
		ctx.strokeStyle = gradient;
		ctx.stroke();
	</script>
</body>
</html>

The ctx.createLinearGradient() method creates a linear gradient for the line, with the starting point at (0, 0) and the ending point at (200, 100). The gradient.addColorStop() method adds two color stops to the gradient, with red at the starting point and blue at the ending point.

Finally, the ctx.strokeStyle property is set to the gradient, and the ctx.stroke() method is called to stroke the line on the canvas with the gradient effect.

You can adjust the position, angle, and colors of the gradient to create different effects for the line.

Popularity 3/10 Helpfulness 4/10 Language html

Source: Grepper

Tags: canvas draw gradient html line

Link to this answer
Share Copy Link

Contributed on Mar 09 2023

SubZero

0 Answers Avg Quality 2/10

html canvas draw line gradient

Contents

More Related Answers

html canvas draw line gradient

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.