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 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Location
    the Copper City
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Angry canvas.drawImage doesn't work

    Hello, I'm new to javascript and html5.
    I've been having problems with some simple(?) lines of code.

    Code:
    var ctex;
    var totalX = 400;
    var totalY = 300;
    
    var racpad = new Image();
    racpad.src = 'Imgs/paddle.gif';
    var brixadow = new Image();
    brixadow.src = 'Imgs/brickLight.gif';
    
    function initCnv()
    {
       canvas = document.getElementById('canvas01');
       ctex = canvas.getContext('2d');
       AppStep();
    }
    
    function clearcv(x)
    {
       ctex.clearRect(0, 0, totalX, totalY);
       ctex.fillStyle = x;
       ctex.beginPath();
       ctex.rect(0, 0, totalX, totalY);
       ctex.closePath();
       ctex.fill();
    }
    
    function AppStep()
    {
       clearcv('black');
       ctex.drawImage(racpad, totalX/2, totalY-50);
    }
    What I'm trying to do is to simply turn the canvas black and show a small gif on it. Upon executing initCnv(), the canvas turns black as it should, while the sprite image doesn't show up at all.
    I can't figure out what's going on, I scoured the code for syntax errors, even tried other image formats but to no avail. Image paths are also correct.

    Maybe the problem's an extremely noobish one, but I still couldn't get a clue, so I thought I'd ask for help around here.

    Thanks for your time!

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Is it possible for you to upload the page somewhere and give us the URL? From the code you provided to us I can not see the problem.

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Location
    the Copper City
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,378
    Thanks
    11
    Thanked 592 Times in 572 Posts
    move ctex.drawImage() (or an upstream trigger) to an onload handler for your image.
    if the images has not loaded when the script call drawImage(), it cannot possibly work.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • Users who have thanked rnd me for this post:

    WickerChild (07-20-2011)

  • #5
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    It was a matter of 2 seconds with Firebug. You have an exception in the method AppStep()
    Code:
    paddley is not defined

  • Users who have thanked devnull69 for this post:

    WickerChild (07-20-2011)

  • #6
    New to the CF scene
    Join Date
    Jul 2011
    Location
    the Copper City
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Sorry for the late reply. Thank you all for your concern, guys.

    Weird, that 'paddley' variable was in another external .js file but I didn't use it for the code in question. I deleted the reference to the file but the problem persists.

    My guess is that the 'image.src' doesn't load for some reason. I tried with
    Code:
    racpad.onload() = AppStep();
    so that AppStep() would fire when the image element would load, but it did nothing. Maybe something with the syntax, I'm still looking into it.
    Is there a way to make jscript wait for images (or elements in general) to load, then proceed with the rest of the code?

  • #7
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Yes, something with the syntax :-)
    Code:
    racpad.onload = AppStep;

  • #8
    Regular Coder
    Join Date
    May 2010
    Location
    Bathurst, Australia
    Posts
    180
    Thanks
    1
    Thanked 22 Times in 22 Posts
    Your images are 404 for starters.
    Disclaimer: I'm hungover 70% of the time i'm on here, any information given may not be correct, or even legible.

  • Users who have thanked BulletTimeBill for this post:

    WickerChild (07-20-2011)

  • #9
    New to the CF scene
    Join Date
    Jul 2011
    Location
    the Copper City
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Solved.

    Just adding 'java/' (the dir holding the js files) to the image paths in the javascript did the trick. It was as if the image paths inside the js file had to be relative to the html file including it (they weren't in the same directory), and not to the js file itself.

    I had never observed this quirk with relative paths before.
    Last edited by WickerChild; 07-20-2011 at 03:15 PM.

  • #10
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Yes, the relative paths refer to the current document, which is the HTML. If you use <script> with a javascript in a different folder, all javascript paths refer to the path of the document/HTML and not to the path of the javascript

  • #11
    New to the CF scene
    Join Date
    Jul 2011
    Location
    the Copper City
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I'll keep that in mind from now on.


  •  

    Posting Permissions

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