#1
  1. Old Fart
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Location
    Chicago
    Posts
    97
    Rep Power
    4

    HTML5 canvas rendering with stacked canvases


    I have been working for a while on a board game players aid for play by email board games. I am using HTML5, Javascript, Jquery and PHP to code it. I am running my development environment in Apache2 server and Firefox under Ubuntu.

    I currently have a problem rendering images on the top of two stacked Canvas objects. Everything works fine on the bottom layer [Z-index: 0] but nothing renders on the top layer [Z-index: 1]. Here is the relavent part of my CSS file:
    Code:
    #content {
      background-color:#ffeedd;
      position: absolute;
      left:0px;
      top:0px; 
    }
    
    #canvas1 {
      position: absolute;
      left:0px;
      top:0px; 
      z-index: 0;
    }
    
    #canvas2 {
      z-index: 1;
      position: absolute;
      left:0px;
      top:0px; 
    }
    Here is the relavent part of my HTML:
    Code:
    <div id="rightofpage">
      <div id="content">
        <canvas id="canvas1">
          Your browser does not support the HTML 5 Canvas. 
        </canvas>
        <canvas id="canvas2">
        </canvas>
      </div>
    </div>
    And here is the Javascript setup code:
    Code:
      BD18.canvas1 = document.getElementById('canvas1');
      if (!BD18.canvas1 || !BD18.canvas1.getContext) {
        return;
      }
      BD18.context1 = BD18.canvas1.getContext('2d');
      if (!BD18.context1) {
        return;
      }
      BD18.canvas2 = document.getElementById('canvas2');
      if (!BD18.canvas2 || !BD18.canvas2.getContext) {
        return;
      }
      BD18.context2 = BD18.canvas2.getContext('2d');
      if (!BD18.context2) {
        return;
      }
    And the actual failing display code:
    Code:
    function BoardToken(snumb,index,flip,bx,by) {
      this.snumb=snumb;
      this.sheet=BD18.trays[snumb];
      this.index=index;
      this.flip=flip;
      this.bx=bx;
      this.by=by;
      [this.hx, this.hy] = BD18.gameBoard.hexCoord(bx, by);
      /*
       * The place function places the token on the board.
       * The optional tmp parameter should be true if this token
       * has not been added to the BD18.boardTokens array.
       */
      this.place=function place(tmp) {
        var temp = typeof tmp !== 'undefined' ? tmp : false;
        var image = this.sheet.image;
        var sx = this.sheet.xStart + (this.flip)?this.sheet.xStep:0;
        var sy = this.sheet.yStart + index*this.sheet.yStep;
        var szx = this.sheet.xSize;
        var szy = this.sheet.ySize;
        if (temp) {BD18.context2.globalAlpha = 0.5;}
        BD18.context2.drawImage(image,sx,sy,szx,szy,this.bx,this.by,30,30);
        BD18.context2.globalAlpha = 1;
      };
    }
    I have used firebug to step through the place method and all looks well but the drawImage function does not render anything on the canvas.

    Any advice or suggestions would be appreciated.
  2. #2
  3. Old Fart
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Location
    Chicago
    Posts
    97
    Rep Power
    4
    I just found the problem.

    The first parameter of the drawImage function was to large and was pointing into a transparent section of the image template.

    I am so embarrassed

IMN logo majestic logo threadwatch logo seochat tools logo