HTML Canvas fillStyle Property fill image pattern

Description

HTML Canvas fillStyle Property fill image pattern

View in separate window 

<html>
    <head>
        <script>
      function drawTriangle(context, x, y, triangleWidth, triangleHeight, fillStyle){
          context.beginPath();//from  ww w.  j  a va  2s  . c o  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;
          
          // pattern fill (right)
          var imageObj = new Image();
          imageObj.onload = function(){
              var pattern = context.createPattern(imageObj, "repeat");
              drawTriangle(context, canvas.width * 4 / 5, triangleY, triangleWidth, triangleHeight, pattern);
          };
          imageObj.src = "image1.png";

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



PreviousNext

Related