10 Replies Latest reply on Nov 23, 2016 12:49 PM by mmcgarvey_syncura

    Canvas flickers when resizing window

    josie grossie

      My published HTML5 canvas file flickers while I am resizing my browser window.  I did not have this problem with Flash CC 2014 or 2015, it seems to be a new issue with Animate.  Occurs in all browsers on my Mac with any new file created in Animate CC.

       

      How to fix it?

        • 1. Re: Canvas flickers when resizing window
          just.emma Adobe Community Professional

          I see the same thing in my published Animate files (also on a Mac) when I resize the browser window in Chrome, Safari, and Firefox. 

           

          I think this must have to do with the new Animate publish profiles, because my older files don't do this.  You can report a bug here: Feature Request/Bug Report Form

           

          I'll report it too.

          1 person found this helpful
          • 2. Re: Canvas flickers when resizing window
            ClayUUID Adobe Community Professional

            Are you publishing as "Adaptive" [sic]? If so, then the flicker is because every time a resize event fires it's changing the resolution of the canvas element, changing its scale, then repainting the entire thing. That's gonna flicker. Making it not flicker would require non-trivial measures.

             

            I personally consider this a very low-priority issue, because really, how often is the user going to be resizing their browser window?

            • 3. Re: Canvas flickers when resizing window
              just.emma Adobe Community Professional

              For me, it occurs without any scaling/"responsive" settings enabled.

               

              Sent from my iPhone

              • 4. Re: Canvas flickers when resizing window
                mmcgarvey_syncura

                I've reported this issue also.  Thanks for the link.

                • 5. Re: Canvas flickers when resizing window
                  Nipun Asthana Adobe Employee

                  It's a by-product of enabling HiDPI support for HTML5 canvas documents by default, which is applied on resize event to take care of zooming-in and out as well.

                  • 6. Re: Canvas flickers when resizing window
                    ClayUUID Adobe Community Professional

                    Something Adobe could do to ameliorate the flicker is add some timing logic so it only rescales the stage after the user stops dragging the window around.

                    • 7. Re: Canvas flickers when resizing window
                      mmcgarvey_syncura Level 1

                      Thanks for the response Nipun,

                       

                      You mentioned in the email you sent that I could modify the HTML5 template to remove/modify the HiDPI code.  I'll look into that as a solution. 

                       

                      Is this something Adobe Animate could implement into the publish settings as a possible option to disable/enable.  Alternatively, could the HTML5 template code be adjusted to only apply the HiDPI code when a certain screen width is detected and instead bypass the code otherwise? 

                       

                      Thanks again for your help.

                      • 8. Re: Canvas flickers when resizing window
                        mmcgarvey_syncura Level 1

                        To anyone interested in a workaround, I was able to remove the flicker by using Nipun's suggestion of modifying the resizeCanvas() function in the HTML5 canvas html file.  The modifications I made were to simply comment out lines 73, 74, 77, and 78.

                         

                        This is the javascript code that I commented out:

                         

                        // canvas.width = w*pRatio*sRatio;
                        // canvas.height = h*pRatio*sRatio;
                        

                         

                        // stage.scaleX = pRatio*sRatio;
                        // stage.scaleY = pRatio*sRatio;
                        

                         

                        To anyone interested in making this modification it might also be important to mention my publish settings in Adobe Animate were set with Make Responsive set to Both and Scale to fill visible area set to Fit in view.  I'm not sure if this modification will work across the board, but I wanted to mention it in case someone else could use it.

                        • 9. Re: Canvas flickers when resizing window
                          just.emma Adobe Community Professional

                          That solution does remove the flicker while resizing the window, however it removes HiDPI support, so text and any vector assets will be blurry on retina displays.

                           

                          I personally prefer having the high DPI support even if it means a brief flicker while resizing the window.

                           

                          If there was a way to remove the flicker while maintaining HiDPI support that would be ideal, but it may not be possible to do both.

                          1 person found this helpful
                          • 10. Re: Canvas flickers when resizing window
                            mmcgarvey_syncura Level 1

                            Another possible workaround is to add a condition if the width of the stage [w] is less than the browser width [iw].  When the user scales their browser smaller in width than the stage width, the HiDPI support is bypassed.  When the user scales beyond the original stage width, HiDPI is supported.

                             

                            Replacing Lines 73 - 81 with this javascript

                             

                            canvas.style.width = dom_overlay_container.style.width = anim_container.style.width = w*sRatio+'px';
                            canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h*sRatio+'px';
                            if (w < iw) {
                                 canvas.width = w*pRatio*sRatio;
                                 canvas.height = h*pRatio*sRatio;
                                 stage.scaleX = pRatio*sRatio;
                                 stage.scaleY = pRatio*sRatio;
                            }
                            lastW = iw; lastH = ih; lastS = sRatio;