Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    all images added to canvas shows the same content :(

    hiya, I just have a specific question regarding to use a canvas-element with javascript

    I have one empty canvas that I want to add 9x7 smaller image elements to, the function "regRead" gets an image-element-code from a global register and that element code is then changed to a base64-encoded string for use as src for the currect image.

    the problem is that when i run the script, all the 63 images added to the canvas gets the same content even if imgCode show different values in debug, i appreciate some solution feedback.

    Code:
    function UpdateCanvas (CanvId) {
      var canvIDNames = ["front", "back"]; // DOM IDs
      var currentCanvas = document.getElementById(canvIDNames[CanvId]).getContext("2d");
      var newImg = "";
      var topLeft = CanvId * 63;
      var bottomRight = topLeft + 63;
      var xa = 0;
      var posX = 0;
      var posY = 0;
      var imgCode = "";
      for (xa = topLeft; xa < bottomRight; xa++) {
        newImg = new Image();
        imgCode = regRead(xa, 1);
        newImg.src = getBase64src(imgCode);
        newImg.onload = function () {
          currentCanvas.drawImage(newImg, posX, posY);
          if (posX == 400) {
            posX = 0;
            posY += 90;
          }
          else {
            posX += 50;
          }
        }
      }
    }
    Last edited by Kitabatake; 07-24-2011 at 11:34 PM.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    What does regRead() do?

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devnull69 View Post
    What does regRead() do?
    regRead gives a hex-code such as "0F" or "A4" used for addressing a register inside getBase64src which contain an array of different base64-strings used for src to the image

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Let me guess: It is always the very last image that is actually showing everywhere?

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devnull69 View Post
    Let me guess: It is always the very last image that is actually showing everywhere?
    it seems so, i might wanna try to modify the src for each new image inside the onload-function, but i dont know if that is feasible with this loose function declaration tied to onLoad.

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    The problem is due to a racing condition. You are creating new images with the same variable name faster than they can be loaded. So the last one wins.

    Solution: Create a "loose loop" so that you load the new picture only after the "old" one has finished loading.

  • #7
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devnull69 View Post
    The problem is due to a racing condition. You are creating new images with the same variable name faster than they can be loaded. So the last one wins.

    Solution: Create a "loose loop" so that you load the new picture only after the "old" one has finished loading.
    seems possible, can i get a clue how to start with that? ^^

    edited: after yet some more googling, i found this.
    Last edited by Kitabatake; 07-24-2011 at 11:33 PM. Reason: solved


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •