HTML Canvas fillStyle Property fill radial gradient

Description

HTML Canvas fillStyle Property fill radial gradient

View in separate window 

<html>
    <head>
        <script>
      function drawTriangle(context, x, y, triangleWidth, triangleHeight, fillStyle){
          context.beginPath();/*  ww  w. ja  va  2s.  co  m*/
          context.moveTo(x, y);
          context.lineTo(x + triangleWidth / 2, y + triangleHeight);
          context.lineTo(x - triangleWidth / 2, y + triangleHeight);
          context.closePath();
          context.fillStyle = fillStyle;
          context.fill();
      }
      
      window.onload = function(){
          var canvas = document.getElementById("myCanvas");
          var context = canvas.getContext("2d");
          
          var grd;
          var triangleWidth = 150;
          var triangleHeight = 150;
          var triangleY = canvas.height / 2 - triangleWidth / 2;
          

          // radial gradient fill (second from right)
          var centerX = (canvas.width /2 +
          (canvas.width /2 - triangleWidth / 2) +
          (canvas.width /2 + triangleWidth / 2)) / 3;
          
          var centerY = (triangleY +
          (triangleY + triangleHeight) +
          (triangleY + triangleHeight)) / 3;
                    
          grd = context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 100);
          grd.addColorStop(0, "red");
          grd.addColorStop(0.17, "black");
          grd.addColorStop(0.33, "yellow");
          grd.addColorStop(0.5, "green");
          grd.addColorStop(0.666, "blue");
          grd.addColorStop(1, "violet");
          drawTriangle(context, canvas.width /2, triangleY, triangleWidth, triangleHeight, grd);
          

      };
        </script>
    </head>
    <body>
    <canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
    </canvas>
    </body>
</html>



PreviousNext

Related