HTML5 Game - Creating Patterns from images

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

Description

Creating Patterns from images

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html lang = "en">
<head>
  <title>pattern.html</title>
  <meta charset = "UTF-8" />
  <script type = "text/javascript">
  function draw(){//from www.  ja va 2s  .c  om
    let drawing = document.getElementById("drawing");
    let con = drawing.getContext("2d");
    let texture = document.getElementById("texture");
    
    pFill = con.createPattern(texture, "repeat");
    con.fillStyle = pFill;

    con.fillRect(10,150,190,150);

    con.font = "40px sans-serif";
    con.fillText("Pattern!", 20, 80);

    con.strokeStyle = pFill;
    con.lineWidth = 5;
    con.strokeRect(10, 10, 180, 100);

  }
  </script>
</head>

<body onload = "draw()">
  <h1>Pattern.html</h1>
  <img src = "http://java2s.com/style/demo/jet.png"
       id = "texture"
       alt = "background image"
       style = "display: none" />

  <canvas id = "drawing"
          width = "200"
    height = "200">
    <p>Canvas not supported</p>
  </canvas>
</body>
</html>

Related Topic