HTML5 Game - Using the no-repeat, repeat-x, and repeat-y strings

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Pattern

Description

Using the no-repeat, repeat-x, and repeat-y strings

Demo

ResultView the demo in separate window 

<!DOCTYPE html>  
<html> 
<head> 
<style> 
#canvas { /*from   w ww .jav  a  2  s.co m*/
  border:1px solid #03F; 
  background:#CFC; 
} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="640" height="480"></canvas> 
<script> 
  let context = document.getElementById('canvas').getContext('2d'); 
    
      let fillImg = new Image(); 
      fillImg.src =  'http://java2s.com/style/download.png'; 

      fillImg.onload = function(){ 

         let fillPattern1 = context.createPattern(fillImg,'no-repeat'); 
         let fillPattern2 = context.createPattern(fillImg,'repeat-x'); 
         let fillPattern3 = context.createPattern(fillImg,'repeat-y'); 

         context.fillStyle = fillPattern1; 
         context.fillRect(0,0,100,100); 

         context.fillStyle = fillPattern3; 
         context.fillRect(0,220,100,100); 

         context.translate(0,110); 
         context.fillStyle = fillPattern2; 
         context.fillRect(0,0,100,100); 
      } 

</script> 



</body> 
</html>

Related Topic