HTML5 addcolorstop() Exercise
Write HTML code to draw a rectangle using Canvas and fill color in gradient from red to pink from start to end.
Solution
HTML5 addcolorstop() method is used to identify the colors and location in a gradient object. This is a method of HTML <canvas> element.
Syntax of addcolorstop()
gradient.addColorStop(stop,color);
Here, stop is a value between 0.0 and 1.0 that represents the position between start and end in a gradient and color is a css color value to display at the stop position.
This is the following HTML5 code to draw a rectangle using canvas and fill color in gradient from red to pink from start to end.
<!DOCTYPE html>
<html>
<head>
<title>addcolorstop() method</title>
</head>
<body>
<canvas id ="convasbx"
width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser doesn't currently support HTML5 Canvas.
</canvas>
<script>
var c = document.getElementById("convasbx");
var context= c.getContext("2d");
var gradient= context.createLinearGradient(10,10,150,0);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "pink");
context.fillStyle = gradient;
context.fillRect(30, 20, 180, 100);
</script>
</body>
</html>
Output of the above code
In the above code, getContext is a method that returns an object for working on canvas, the fillStyle is a property of canvas and used to fill color gradient in the drawing and the fillRect method is used to draw a filled rectangle.