mask image - Javascript Canvas

Javascript examples for Canvas:image

  1. HOME
  2. Javascript
  3. Canvas
  4. image

Description

mask image

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){/* ww w .  j  a v a 2 s .  c  o  m*/
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var pattern = null;
var currentSize = 100;
var step = 1;
var direction = 1;
var imageObj = new Image();
imageObj.onload = function() {
    pattern = context.createPattern(imageObj, 'repeat');
    setInterval(draw, 10);
};
imageObj.src = 'https://www.java2s.com/style/demo/Google-Chrome.png';
function draw() {
    context.clearRect(0, 0, 200, 200);
    context.beginPath();
    context.moveTo(25,25);
    context.lineTo(currentSize,25);
    context.lineTo(25,currentSize);
    context.closePath();
    context.fillStyle = pattern;
    context.fill();
    currentSize += direction * step;
    if(currentSize > 150){
        direction = -1;
    }
    if(currentSize < 50){
        direction = 1;
    }
};
    });

      </script> 
   </head> 
   <body> 
      <canvas id="myCanvas" width="578" height="200"></canvas>  
   </body>
</html>

Related Tutorials