<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>PIXI Application Resolution Doctest</title> <link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css"> <link rel="stylesheet" href="../../css/doctest.css"> <script src=".././3rdparty/highlight/highlight.pack.js"></script> <script src=".././3rdparty/all.js"></script> <script src=".../../dist/iwmlib.pixi.js"></script> <script src="../../dist/iwmlib.pixi.js"></script> <style> #dpi { height: 1in; left: -100%; position: absolute; top: -100%; width: 1in; } </style> </head> <body onload="Doctest.run()"> <h1>Application Resolution</h1> <p> This is a doc test page to examine the width and height of canvas elements at different resolutions. </p> <p>Further documentation:</p> <ul> <li><a href="https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html">WebGL Fundamentals</a></li> <li><a href="https://www.khronos.org/webgl/wiki/HandlingHighDPI">Handling High DPI</a></li> </ul> <p>Device properties:</p> <ul> <li id="dpi-result">Your screen has <span></span> dpi.</li> <li id="dpr-result">Your screen has a device-pixel-ratio of <span></span>.</li> </ul> <p> Set width and height per CSS: <input type="checkbox" /> </p> <script> let scaled = false $('input[type="checkbox"]').click(function(e) { if ($(this).prop('checked')) { $('#canvas1').css({width: '100px', height: '100px'}) $('#canvas2').css({width: '100px', height: '100px'}) $('#canvas3').css({width: '100px', height: '100px'}) $('#canvas4').css({width: '100px', height: '100px'}) } else { $('#canvas1').css({width: 'auto', height: 'auto'}) $('#canvas2').css({width: 'auto', height: 'auto'}) $('#canvas3').css({width: 'auto', height: 'auto'}) $('#canvas4').css({width: 'auto', height: 'auto'}) } }) </script> <p>Let's look at some canvas resolution examples:</p> <div id="dpi"></div> <script> $('#dpi-result span').text(document.getElementById("dpi").offsetHeight) $('#dpr-result span').text(window.devicePixelRatio) </script> <script> const style = new PIXI.TextStyle({ fontStyle: 'italic', fontWeight: 'bold', fill: ['#ffffff', '#00ff99'], stroke: '#4a1850', strokeThickness: 5, wordWrap: true, wordWrapWidth: 440 }) </script> <canvas id="canvas1" class="interactive"></canvas> <script class="doctest"> const app1 = new PIXI.Application({width: 100, height: 100, resolution: 1, backgroundColor : 0xf8ce2d, view: canvas1}) const text11 = new PIXI.Text('AaBb12') const text12 = new PIXI.Text('IWM', style) text12.y = 30 app1.stage.addChild(text11, text12) </script> <canvas id="canvas2" class="interactive"></canvas> <script class="doctest"> const app2 = new PIXI.Application({width: 100, height: 100, resolution: 2, backgroundColor : 0xfd6b6a, view: canvas2}) const text21 = new PIXI.Text('AaBb12') const text22 = new PIXI.Text('IWM', style) text22.y = 30 app2.stage.addChild(text21, text22) </script> <canvas id="canvas3" class="interactive"></canvas> <script class="doctest"> const app3 = new PIXI.Application({width: 100, height: 100, resolution: 3, backgroundColor : 0x40c3f2, view: canvas3}) const text31 = new PIXI.Text('AaBb12') const text32 = new PIXI.Text('IWM', style) text32.y = 30 app3.stage.addChild(text31, text32) </script> <canvas id="canvas4" class="interactive"></canvas> <script class="doctest"> const app4 = new PIXI.Application({width: 100, height: 100, resolution: window.devicePixelRatio, backgroundColor : 0xd7a3f9, view: canvas4}) const text41 = new PIXI.Text('AaBb12') const text42 = new PIXI.Text('IWM', style) text42.y = 30 app4.stage.addChild(text41, text42) </script> </body>