HTML Canvas createPattern() create image pattern

Description

HTML Canvas createPattern() create image pattern

View in separate window 

<html>
    <head>
        <script>
      function drawTriangle(context, x, y, triangleWidth, triangleHeight, fillStyle){
          context.beginPath();//from  w w w .j  a v a  2 s . c  om
          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