Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

WebGL. Blur UI when resize canvas

Discussion in 'Web' started by Zaicheg, Aug 31, 2016.

  1. Zaicheg

    Zaicheg

    Joined:
    Sep 30, 2009
    Posts:
    46
  2. mikaelwallen

    mikaelwallen

    Joined:
    Jun 3, 2016
    Posts:
    56
    The canvas is drawn with a specific width and height as specified by the width and height attributes in the index.html file. When you then resize using css as you showed the canvas image is simply rescaled which results in blurriness.
    Instead you need to modify the width and height attributes of the canvas. Here's one simple way:
    * Change the body element in index.html

    <body class="template" onresize="resize_canvas()" onpageshow="resize_canvas()">

    * Then add the following script in index.html:
    Code (JavaScript):
    1. <script type="text/javascript">
    2.        function resize_canvas(){
    3.         canvas = document.getElementById("canvas");
    4.         canvas.width  = document.body.clientWidth;
    5.         canvas.height = document.body.clientHeight;
    6.       }
    7.    
    8.       resize_canvas();
    9.     </script>
     
  3. Zaicheg

    Zaicheg

    Joined:
    Sep 30, 2009
    Posts:
    46
  4. Marks4

    Marks4

    Joined:
    Feb 25, 2018
    Posts:
    521
    @Zaicheg Hey, did you fix this problem? How?