HTML5 Game - Illustrates using a simple image as a pattern.

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

Description

Illustrates using a simple image as a pattern.

Demo

ResultView the demo in separate window 

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Canvas Demo</title> 
        <style> 
canvas { /*  w w  w. ja  v a 2  s  .  c o  m*/
  border: 1px solid #000; 
} 
        </style> 
    </head> 
    <body> 
      <canvas id="myCanvas" width="200" height="200">Did You Know: Every time 
        you use a browser that doesn't support HTML5
      </canvas> 
      <script> 
// Get the context we will be using for drawing. 
let myCanvas = document.getElementById('myCanvas'); 
let myContext = myCanvas.getContext('2d'); 
  
// Create a new image element and fill it with a kitten. 
let myImage = new Image(); 
myImage.src = 'http://java2s.com/style/download.png'; 
  
// We can't do anything until the image has successfully loaded. 
myImage.onload = function() { 
  // Create a pattern with the image and use it as the fill style. 
  let myPattern = myContext.createPattern(myImage, 'repeat'); 
  myContext.fillStyle = myPattern; 
  myContext.fillRect(5, 5, 150, 150); 
}; 
      </script> 
    </body> 
</html>

Related Topic