24 Replies Latest reply on Sep 5, 2016 9:21 AM by Nipun Asthana

    Flash Canvas Hack: Better vector graphics on Retina and HD

    adam of the redwoods Level 1

      Tired of blurry vector graphics on Apple retina and other HD displays when creating HTML5 stuff in FlashCC?

       

      Place this code in the first frame of your code/timeline:

       

      if (window.devicePixelRatio > 1) {
      
          var canvasWidth = canvas.width;
          var canvasHeight = canvas.height;
      
      
          canvas.width = canvasWidth * window.devicePixelRatio;
          canvas.height = canvasHeight * window.devicePixelRatio;
          canvas.style.width = canvasWidth+"px";
          canvas.style.height = canvasHeight+"px";
      
          //console.log(window.devicePixelRatio);
           stage.scaleX=stage.scaleY=window.devicePixelRatio;
      }
      
      
      
      
      
      

       

      ...and voila! Smooth vector graphics on retina.

      I haven't fully tested this for all displays, so if anyone else can verify on Windows High DPI resolutions, please let me know.

       

      Cheers,

      Adam

      http://adam.piettes.com