Report abuse 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<html>
  <head>
    <title>WePlayGo</title>
     <link rel="stylesheet" href="css/custom.css" type="text/css" media="screen, projection">
  </head>
  <body>
    <canvas id="canvas" class="canvas" width="400" height="180"></canvas>
    <p id="debug"></p>
    <script type="application/javascript">
      ...

      // ****: Don't change the composition this here. 
      // gridContext.globalCompositeOperation = 'destination-over';

      // Create new image object to use as pattern
      var img = new Image();
      img.src = 'bg_wood.jpg';
      img.onload = function()
      {
        var boardBG = gridContext.createPattern(img, 'repeat');
        // ****: Change it here. 
        gridContext.globalCompositeOperation = 'destination-over';
        gridContext.fillStyle = boardBG;
        gridContext.fillRect(xStart - gridPadding, 
                 yStart - gridPadding, 
                 gridSize + gridPadding * 2, 
                 gridSize + gridPadding * 2);
        // ****: Revert the normal after done.
        gridContext.globalCompositeOperation = 'source-over';
      }

      ....
    </script>
  </body>
</html>