Canvas method addColorStop() in Javascript

The Canvas method addColorStop() used to the colors and position in a gradient object. It can be used to together with createLinearGradient() or createRadialGradient() and can be called multiple times to create multiple gradient color.

Syntax

 1 gradient.addColorStop(<stop>, <color>);

stop : It define the position between start and end in a gradient and can be specify between 0.0 and 1.0

color : It specifies a CSS color value to display at the stop position

Canvas method addColorStop() method

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 	<h1>The Canvas Object</h1>
 5 	<h2>Example</h2>
 6 	
 7 	<canvas id="canvas" width="300" height="150" style="border:1px solid blue;">
 8 	  The browser does not support the HTML5 canvas element.
 9 	</canvas>
 10 	
 11 	<script>
 12 	  const canvas = document.getElementById("canvas");
 13 	  const ctx = canvas.getContext("2d");
 14 	  // createRadialGradient() method
 15 	  const gradient = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
 16 	  gradient.addColorStop(0, "lightblue");
 17 	  gradient.addColorStop(1, "lightgreen");
 18 	  ctx.fillStyle = gradient;
 19 	  ctx.fillRect(10, 10, 150, 100);
 20 	</script>
 21 </body>
 22 </html>

Canvas method addColorStop() method

Canvas method addColorStop() method with createLinearGradient()

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 	<h1>The Canvas Object</h1>
 5 	<h2>Example</h2>
 6 	
 7 	<canvas id="canvas" width="300" height="150" style="border:1px solid blue;">
 8 	  The browser does not support the HTML5 canvas element.
 9 	</canvas>
 10 	
 11 	<script>
 12 	  const canvas = document.getElementById("canvas");
 13 	  const ctx = canvas.getContext("2d");
 14 	  // createLinearGradient() method
 15 	  const gradient = ctx.createLinearGradient(75, 5, 90, 100);
 16 	  gradient.addColorStop(0, "red");
 17 	  gradient.addColorStop(1, "lightgreen");
 18 	  ctx.fillStyle = gradient;
 19 	  ctx.fillRect(10, 10, 150, 100);
 20 	</script>
 21 </body>
 22 </html>