HTML5 Game - Canvas Creating Textures

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Colour and Style

Description

Creating Textures

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>
<head>
<script>

window.onload = function()// w  w  w.j  a  v  a  2s. c o m
{
   canvasObjects  = document.getElementById("canvasObjects");
   contextObjects = canvasObjects.getContext("2d");
   canvasTexture  = document.getElementById("canvasTexture");
   contextTexture = canvasTexture.getContext("2d");

   //TEXTURE creation.
   //                          color                               x  y  w  h
   //                         ------------                         -  -  -  -
   contextTexture.fillStyle = "grey";      contextTexture.fillRect(0, 0, 1, 1);
   contextTexture.fillStyle = "grey";      contextTexture.fillRect(0, 1, 1, 1);
   contextTexture.fillStyle = "lightgrey"; contextTexture.fillRect(0, 2, 1, 1);
   contextTexture.fillStyle = "lightgrey"; contextTexture.fillRect(1, 0, 1, 1);
   contextTexture.fillStyle = "grey";      contextTexture.fillRect(1, 1, 1, 1);
   contextTexture.fillStyle = "grey";      contextTexture.fillRect(1, 2, 1, 1);
   contextTexture.fillStyle = "darkgrey";  contextTexture.fillRect(2, 0, 1, 1);
   contextTexture.fillStyle = "darkgrey";  contextTexture.fillRect(2, 1, 1, 1);
   contextTexture.fillStyle = "grey";      contextTexture.fillRect(2, 2, 1, 1);

   //REPEAT pattern variables.
   let pattern = contextObjects.createPattern(canvasTexture, "repeat");

   //PATTERN objects.
   contextObjects.fillStyle = pattern;
   contextObjects.fillRect(0, 0, canvasObjects.width, canvasObjects.height);
}
</script>
</head>
<body>
<div>

<canvas id    = "canvasObjects"
        width = "400"  height ="100"
        style = "border:2px solid black;
                 position:absolute; left:auto; top:auto;
                 z-index: 2">
Your browser doesn't currently support HTML5 Canvas.
</canvas>
<canvas id    = "canvasTexture"
        width = "3"  height ="3"
        style = "position:absolute; left:auto; top:auto;
                 z-index: 1">
Your browser doesn't currently support HTML5 Canvas.
</canvas>
</div>
</body> </html>

Related Topic