www.webdeveloper.com
Results 1 to 1 of 1

Thread: canvas context.drawImage fails even though image is loaded

  1. #1
    Join Date
    May 2012
    Posts
    9

    canvas context.drawImage fails even though image is loaded

    The code below DOES works as "intended" at least for creating an artificial delay.

    The code works as follows:
    • create a bunch of image objects
    • set the onload callback to the delay function
    • the delay fuction calls the draw function at some other time using a timer
    • the image is drawn when the timer ends


    Code:
    function App()
    {
        this.canvas = null;
        this.context = null;
        
        this.img = new Array();
        this.imgSrc = new Array();
        
        this.counter = 0;
    }
    
    App.prototype.init = function()
    {
        this.canvas = document.getElementById('canvas');
        this.context = this.canvas.getContext('2d');
        
        this.img[0] = new Image(); 
        this.img[1] = new Image(); 
        this.img[2] = new Image();
        
        this.img[0].onload = this.delay.call(this, 0); 
        this.img[1].onload = this.delay.call(this, 1); 
        this.img[2].onload = this.delay.call(this, 2);
        
        this.img[0].src = "resources/1280x720-1.jpg";
        this.img[1].src = "resources/1280x720-2.jpg";
        this.img[2].src = "resources/1280x720-3.jpg";
    }
    
    App.prototype.delay = function(time)
    {
        var self = this;
        setTimeout(function(){self.draw.call(self);}, time * 1000);
    }
    
    App.prototype.draw = function()
    {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.context.drawImage(this.img[this.counter], 0, 0);
        
        this.counter++;
    }
    However, when i try to make my code more "straightfoward" by setting the onload callback to the draw function directly, the drawImage function fails and throws an error.


    Code:
    Error: uncaught exception: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]"  
    nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)"  location: "JS frame :: http:<...>/edu/test/test.js :: <TOP_LEVEL> :: line 39"  data: no]
    the code modified is below:

    Code:
    function App()
    {
        this.canvas = null;
        this.context = null;
        
        this.img = new Array();
        this.imgSrc = new Array();
        
        this.counter = 0;
    }
    
    App.prototype.init = function()
    {
        this.canvas = document.getElementById('canvas');
        this.context = this.canvas.getContext('2d');
        
        this.img[0] = new Image(); 
        this.img[1] = new Image(); 
        this.img[2] = new Image();
        
        this.img[0].onload = this.draw.call(this); 
        this.img[1].onload = this.draw.call(this); 
        this.img[2].onload = this.draw.call(this);
        
        this.img[0].src = "resources/1280x720-1.jpg";
        this.img[1].src = "resources/1280x720-2.jpg";
        this.img[2].src = "resources/1280x720-3.jpg";
    }
    
    // App.prototype.delay = function(time)
    // {
        // var self = this;
        // setTimeout(function(){self.draw.call(self);}, time * 1000);
    // }
    
    App.prototype.draw = function()
    {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.context.drawImage(this.img[this.counter], 0, 0);
        
        this.counter++;
    }
    I've done various testing and the problem seems solely on the drawImage function. The context for "this" is correctly provided.

    In other words, if i remove this.context.drawImage(), the code works just fine.

    Anybody have any clue what's causing the drawImage to fail?

    Edit: apparently this is a genuine bug? http://stackoverflow.com/questions/6...-not-available.
    Last edited by rainstorm; 06-25-2012 at 02:33 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles