[SOLVED] On preview I get a crash with an "InvalidStateError" popup

0 favourites
  • 7 posts
From the Asset Store
Minimalist Crash Balls is a game where the goal is to hit the ball on the portal, with 20 different levels :)
  • (edit: See [SOLVED] post below... )

    The game I'm working on had no issues launching in preview mode a few days back, and today this same project now crashes on preview.

    I've made no changes to the project file.

    When attempting to preview, the game begins to load, and halts at a black canvas with the error shown below.

    Javascript error!

    Uncaught InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.

    Still investigating this, but I figured I'd ask, just in case anyone knows off hand what might cause this.

    Things I tested

    This error occurs in Chrome, Firefox, and NW.js.

    Several older versions of this same project also now crash on previewing, with the same error, so I don't think it's a change in the most recent version of the game.

    I tried making a new blank project, and that seems to preview just fine.

    So I think there is something in my game that's triggering the problem, but the fact that older versions also trigger this error (which I don't recall ever seeing before ) is strange.

    I did find a 10 month old version of the game project that seems to preview just fine, so whatever it is, doesn't affect all copies of the game.

    I'll be looking to see if I can spot the difference between versions.

    It seems like there must be some resource, object, or image in the game that is suddenly not playing well with HTML canvas for some reason.

    More info

    I can't think of anything that would mess with this.

    I did rollback my graphics drivers in the last few days, I would think that'd be pretty separate from HTML 5 though, and in particular separate from the minutia of changes in older versions of the game. Still, it's the only thing that comes to mind. (edit: Just tried installing the newest drivers and I still get the same error, so looks like drivers aren't the issue.)

    I also tried updating Construct 2 and that didn't seem to change anything.

    I'm using Windows 7 x64 Pro, Nvidia GTX 780, Construct version r265

    Related posts

    I found one other post that mentions this error message, but it seems to be in a differnt context, using web proxy preview, so I'm not sure how much it overlaps with my case.


    Any thoughts or suggestions are welcome.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • There is quite a lot of information in the internet about this error. The common cause appears to be a broken image format, or a broken image URL.

    A few posts on this forum suggest that there may be an issue with loading-logo.png file. Make sure it exists in your project, is in the correct folder, try replacing it with a different image.

  • Hey thanks for the info dop2000. :)

    I've seen a few references to the logo png, like in the other post I linked, though I wasn't sure if that was related to my case, but it looks like it might be in part.

    I tried copying an old logo png over the current one, and even though they appear identical, my game loads slightly farther now and no longer gives an error.

    It will now show the loading image, partially fill the progress bar in red, then freeze. The red loading bar usually indicates some kind of loading failure, but I don't know what problems do or don't trigger that color change.

    In Debug mode, it seems it loads to 17% before freezing every time.

    This is what it looks like.

    So this is farther than I was getting before.

    Is there any kind of weird event that might have corrupted an image file?


    If C2 crashed while the image editor was open, or crashed as the image editor was closing and updating the file? I don't recall a crash off-hand, but one might have happened.

    Or maybe if the computer went into sleep mode when the animation editor was open and didn't quite restore correctly, on waking?

  • Have you tried different browsers? Are there any errors in browser console log? Maybe some other files got corrupted too..

  • I've tried NW.js, Chrome, Firefox, and Iron.

    (I usually do all my work previewing NW.js)

    Also, wow, I can't believe I didn't think to check the debug console, good call, dop2000!

    ... So I checked it and just as the freeze happens, I get an avalanche of errors, each saying a different image file can't be found. Essentially every image in the game can't be found. Only the logo image loads, and even it didn't load until I overwrote it with a backup version of the logo from an older project.

    On further inspection of the files in the project folders I noticed something very strange.

    The last version that works has all normal looking image files.

    For the next version after it, which spews the avalanche of image errors, all the images and audio files are missing "Date Modified" meta data.

    I mean literally missing,leaving a blank in the column where they would normally appear in Windows explorer. I've never seen that before.

    Opening properties on one of these files, the "Date Modified" field just shows "12:00am", and no date, as you'd normally see.

    All the image files still open and display normally though.

    Interestingly, the only file that has a "Date Modified" value is the logo file, which got filled in only after I replaced it with an older image file. And that's the only image that loads, that I know of.

    I'm starting to suspect there may be some hard drive problem, but I'm not sure. It's all pretty weird. I backed up the last several versions (working and not) to separate drives just in case.

  • I'm not sure I can help you further with this.. I would try saving the project as a folder (or simply unzipping capx file), and replacing images from an old backup copy. Or copy all files to another PC and try to open there. Or maybe open all images in a software like Photoshop and save them again with the same name (to restore metadata).

  • [SOLVED]

    Wow, okay so I got the latest version completely working again, and it's got to be one of the weirdest issues I've ever encountered, with an equally weird solution.

    Firstly, thanks dop2000 for your awesome suggestions, especially the JavaScript console error log, as the errors got me looking at the files, which in turn is how I finally noticed that weird missing/blank "Date Modified" meta data, and that was (for some reason) the key to the whole thing.

    So here's a breakdown of the problem, the cause, and the solution, in case this info manages to help anyone else out of the same weird predicament.

    Short version:


    Error on previewing game. "Failed to execute 'drawImage' on 'CanvasRenderingContext2D'"

    Also Javascript console has tons of "Error loading image" errors.


    Image files in project folder are glitched, such that hundreds are missing a "Date Modified" value.


    Use a program to force all glitched files to have a "Date Modified" value.

    I used a freeware program called "Flexible Renamer" to set their "Date Modified" values to match their "Date Last Accessed" values.

    After this the game previewed and loaded with no problems. :)

    Detailed version:


    My game project opens in the C2 editor with no apparent problems, but when I try to preview the game, it starts loading, and before any imagery appears, it freezes and pops up the following error message (previewing in NW.js or Chrome or Opera):

    So what I gather is that somehow the metadata for about 1000+ files got glitches so that only the "Date Modified" field was missing.

    This seemed to be mainly asset files, like images and audio. The xml files were unaffected.

    Javascript error!

    Uncaught InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.

    http://localhost:50000/preview.js, line 1900 (col 11)

    Alternatively, when previewing in Firefox, I got this less informative version of the same error:

    Javascript error!


    localhost/preview.js, line 1900 (col 0)

    (image: i.imgur.com/q3cnVDg.png)

    When I looked at the JavaScript console (I used Firefox) to see what errors had been recorded in the background, I found hundreds of

    "Error loading image" errors logged, essentially one error for every image in the game.

    Error loading image 'http://localhost:50000/enturretradius_os-default-000.png':

    (image: i.imgur.com/UPn8vP7.png)

    First attempt to fix it

    So, I tried replacing the "loading-logo.png" image with an older copy of my game.

    Now when I previewed the game, The logo image appeared, and there was no error popup, but the loading bar under the logo was red, and it only partially filled before freezing.

    (image: i.imgur.com/qx7eFcq.png)

    Checking the JavaScript console, the same procession of "Error loading image" entries were logged.

    (Though I suspect that there was probably previously an error for the logo image that was now resolved.)


    In Windows Explorer, I went to inspect the actual image files that were failing to load.

    The "unloadable" images could be opened and viewed with no issues, but they were bizarrely all missing a "Date Modified" value.

    In Windows Explorer, the there was just blank space in the "Date Modified" column for those files.

    In the file properties the "Date Modified" entry was just "12:00am" with no day, month, or year.


    I'm not sure how or why these files eneded up like this, but I'm wary that it might be a hard drive problem.

    Backup your stuff to be safe.


    The ugly solution:

    First I tried overwriting all my images with copies from an older version of the game, and this did kind of work, as I got far fewer errors in the java console. I'm pretty sure that if I'd replaced them all it would have allowed the game to launch, but it was an ugly solution, because I had changed the names of some of the objects (changing their image names), and I had new objects and images, and some images I'd edited. So overall, I'd have a lot of extra work getting this horrible hybrid of my new and old project back to a fully up-to-date state. I ultimately decided not to go this route, and instead worked out the good solution below.

    The good solution:

    It turns out it really is just the "Date Modified" value that needs to be fixed for the unloadable files.

    I use a freeware program called "Flexible Renamer" to do this, as it can edit files in large batches pretty easily.

    These are the steps:

    1. Make a backup of your project folder before continuing.

    2. In Windows Explorer search the project folder for "*" to get every file and folder in the search results.

    3. Sort the search results by "Date Modified" to roughly group all the files with missing dates.

    4. In Flexible Renamer, select the "Specify File" tab, and then the "Attributes" sub-tab.

    5. In the "Target" section enable "Files", and "Recursive Sub Folders".

    6. Set "Timestamp" to "Make the same".

    7. Set "Base Date/Time" to "Date Accessed"

    8. Set "Apply To" to "Date Modified".

    9. Back in Windows Explorer, select all the files that are missing "Date Modified" values, and drag them into Flexible Renamer's file area.

    10. In Flexible Renamer, click the "Start Modify" button.


    You can redo the file search again, just to make sure you didn't miss any date-less files.

    You can also try previewing the project from construct, because the JavaScript console will tell you the names of any files still broken.

    After this all the files in my project folder had "Date Modified" values, and the project previewed and loaded without any problems.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)