HTML5 Game - Filling with an image file using repeat

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

Description

Filling with an image file using repeat

Demo

ResultView the demo in separate window 

<!DOCTYPE html>  
<html> 
<head> 
<style> 
#canvas { /*from  w  w  w . ja  va 2s.c  o  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 fillPattern = context.createPattern(fillImg,'repeat'); 
         context.fillStyle = fillPattern; 
         context.fillRect(0,0,200,200); 

      } 

</script> 



</body> 
</html>

Related Topic