search

phetsims / rutherford-scattering

"Rutherford Scattering" is an educational simulation in HTML5, by PhET Interactive Simulations.
GNU General Public License v3.0
2 stars 3 forks source link

CT failed to execute drawImage onCanvasRenderingContext2D #169

Closed KatieWoe closed 3 years ago

KatieWoe commented 3 years ago 
rutherford-scattering : pan-and-zoom-fuzz : unbuilt
https://bayes.colorado.edu/continuous-testing/ct-snapshots/1613053766773/rutherford-scattering/rutherford-scattering_en.html?continuousTest=%7B%22test%22%3A%5B%22rutherford-scattering%22%2C%22pan-and-zoom-fuzz%22%2C%22unbuilt%22%5D%2C%22snapshotName%22%3A%22snapshot-1613053766773%22%2C%22timestamp%22%3A1613056822062%7D&brand=phet&ea&fuzz&fuzzPointers=2&memoryLimit=1000&supportsPanAndZoom=true
Query: brand=phet&ea&fuzz&fuzzPointers=2&memoryLimit=1000&supportsPanAndZoom=true
Uncaught InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
Error: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
at CanvasBlock.walkDown (https://bayes.colorado.edu/continuous-testing/ct-snapshots/1613053766773/scenery/js/display/CanvasBlock.js:365:33)
at CanvasBlock.update (https://bayes.colorado.edu/continuous-testing/ct-snapshots/1613053766773/scenery/js/display/CanvasBlock.js:195:12)
at BackboneDrawable.update (https://bayes.colorado.edu/continuous-testing/ct-snapshots/1613053766773/scenery/js/display/BackboneDrawable.js:293:33)
at DOMBlock.update (https://bayes.colorado.edu/continuous-testing/ct-snapshots/1613053766773/scenery/js/display/DOMBlock.js:58:22)
at BackboneDrawable.update (https://bayes.colorado.edu/continuous-testing/ct-snapshots/1613053766773/scenery/js/display/BackboneDrawable.js:293:33)
at Display.updateDisplay (https://bayes.colorado.edu/continuous-testing/ct-snapshots/1613053766773/scenery/js/display/Display.js:500:24)
at https://bayes.colorado.edu/continuous-testing/ct-snapshots/1613053766773/joist/js/Sim.js:309:20
at Action.execute (https://bayes.colorado.edu/continuous-testing/ct-snapshots/1613053766773/axon/js/Action.js:225:18)
at Sim.stepSimulation (https://bayes.colorado.edu/continuous-testing/ct-snapshots/1613053766773/joist/js/Sim.js:1076:31)
at Sim.stepOneFrame (https://bayes.colorado.edu/continuous-testing/ct-snapshots/1613053766773/joist/js/Sim.js:1066:12)
id: Bayes Chrome
Snapshot from 2/11/2021, 7:29:26 AM
jessegreenberg commented 3 years ago

There is something about the RutherfordNucleousIcon causing this, this change makes the bug go away

  static RutherfordNucleusIcon( protonCount, neutronCount ) {

    // create static properties and nucleus for the icon
    const protonCountProperty = new Property( protonCount );
    const neutronCountProperty = new Property( neutronCount );
    const nucleus = new RutherfordNucleus( protonCountProperty, neutronCountProperty );

    return new phet.scenery.Circle( 25, { fill: 'red' } );
    // return new IconCanvasNode( nucleus );
  }
jessegreenberg commented 3 years ago

The usage of bind to paint the canvas was kind of inefficient, fixed in the above commit. But that didn't resolve the issue.

jessegreenberg commented 3 years ago

I noticed that the bug goes away when "Nuclear Scale" is selected in the RutherfordAtomScreenView.

jessegreenberg commented 3 years ago

The bug happens when the RutherfordNucleusIcon has some non-1 opacity and pan and zoom tries to move it entirely out of view so it has no bounds. The error is in CanvasBlock.walkDown

        if ( node.getOpacity() !== 1 ) {
          sceneryLog && sceneryLog.CanvasBlock && sceneryLog.CanvasBlock( `Pop opacity ${trail.subtrailTo( node ).toDebugString()}` );
          // Pop opacity
          const topWrapper = this.wrapperStack[ this.wrapperStackIndex ];
          const bottomWrapper = this.wrapperStack[ this.wrapperStackIndex - 1 ];
          this.popWrapper();

          // Draw the transparent content into the next-level Canvas.
          bottomWrapper.context.setTransform( 1, 0, 0, 1, 0, 0 );
          bottomWrapper.context.globalAlpha = node.getOpacity();
          bottomWrapper.context.drawImage( topWrapper.canvas, 0, 0 );
          bottomWrapper.context.globalAlpha = 1;
        }

topWrapper has zero width and height, and browser throws an error. I think this is beyond the sim, moving to scenery.

jessegreenberg commented 3 years ago

I opened https://github.com/phetsims/scenery/issues/1179 to investigate further. THis is on hold until fixed there.

jessegreenberg commented 3 years ago

https://github.com/phetsims/scenery/issues/1179 has a fix and this should be gone now, ill wait till next CT iterations to close. Also, we don't need to disable pan and zoom in this sim anymore, ill remove that from package.json.

jessegreenberg commented 3 years ago

It is gone, closing image