HTML5 Game - Creating Patterns out of images

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

Description

Creating Patterns out of images

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function()//from   w w  w  . j a v  a2  s.  c o  m
{
   canvas  = document.getElementById("canvasArea");
   context = canvas.getContext("2d");

   let smallImage = new Image();
   smallImage.src = "http://java2s.com/style/download.png";

   //PATTERN creation.
   smallImage.onload = function()
   {
      //ATTRIBUTES.
      context.shadowOffsetX = 4;
      context.shadowOffsetY = 4;
      context.shadowBlur    = 20;
      context.shadowColor   = "lavender";
      context.strokeStyle   = "gray";
      context.lineWidth     = 1;

      //REPEAT pattern variables.
      let repeatPattern   = context.createPattern(smallImage, "repeat");
      let noRepeatPattern = context.createPattern(smallImage, "no-repeat");
      let repeatXPattern  = context.createPattern(smallImage, "repeat-x");
      let repeatYPattern  = context.createPattern(smallImage, "repeat-y");

      //PATTERN objects.
      context.fillStyle = repeatPattern;
      context.fillRect   (125, 125, 325, 325);
      context.strokeRect (125, 125, 325, 325);
      context.fillStyle = noRepeatPattern;
      context.fillRect   (0, 0, 100, 100);
      context.strokeRect (0, 0, 100, 100);
      context.fillStyle = repeatXPattern;
      context.fillRect   (125, 0, 350, 100);
      context.strokeRect (125, 0, 350, 100);
      context.fillStyle = repeatYPattern;
      context.fillRect   (0, 125, 100, 350);
      context.strokeRect (0, 125, 100, 350);
   }
}
</script>
</head>
<body>

<div    style  = "width:500px;   height:500px;
                  margin:0 auto; padding:5px;">
<canvas id     = "canvasArea"
        width  = "500"  height = "500"
        style  = "border:2px solid black">
You're browser doesn't currently support HTML5 Canvas.
</canvas>
</div>
</body>
</html>

Related Topic