Skip to content
Related Articles

Related Articles

Improve Article

Fabric.js sourceFromHsl() Method

  • Last Updated : 19 Mar, 2021

The sourceFromHsl() method is used to return an array representation of color for the specified color values in HSL (Hue-saturation-lightness) or HSLA (Hue-saturation-lightness-alpha) format.

Syntax:

sourceFromHsl(color)

Parameters: This method accepts a parameter as mentioned above and described below:

  • color: This parameter holds the specified color values in HSL or HSLA format.

Return Value: This method returns an array representation of values in RGBA (Red Green Blue and Alpha) format of the color for the specified color values in HSL or HSLA format.

Example 1:



HTML




<!DOCTYPE html>
<html>
  
<head>
  <!-- Adding the FabricJS library -->
  <script src=
  </script>
</head>
  
<body>
<script type="text/javascript">
  
 // Calling the sourceFromHsl() function over
 // the color value in HSL and HSLA format
 console.log(fabric.Color.sourceFromHsl("hsl(0, 100%, 50%)"));
 console.log(fabric.Color.sourceFromHsl("hsla(0, 100%, 50%, 0.6)"));
</script>
  
</body>
  
</html>

Output:

[255,0,0,1]
[255,0,0,0.6]

Example 2:

HTML




<!DOCTYPE html>
<html>
  
<head>
  <!-- Adding the FabricJS library -->
  <script src=
  </script>
</head>
  
<body>
<script type="text/javascript">
  
 // Initializing some color values in HSL format
 var A = "hsl(0, 100%, 50%)";
 var B = "hsl(0, 0%, 50%)";
   
 // Initializing some color values in HSLA format
 var C = "hsla(0, 100%, 50%, 0.9)";
 var D = "hsla(0, 0%, 50%, 0.2)";
  
 // Calling the sourceFromHsl() function over
 // the above color values
 console.log(fabric.Color.sourceFromHsl(A));
 console.log(fabric.Color.sourceFromHsl(B));
 console.log(fabric.Color.sourceFromHsl(C));
 console.log(fabric.Color.sourceFromHsl(D));
</script>
  
</body>
  
</html>

Output:

[255,0,0,1]
[128,128,128,1]
[255,0,0,0.9]
[128,128,128,0.2]



My Personal Notes arrow_drop_up
Recommended Articles
Page :