SHARE
TWEET

Testing canvas size limits with multiple browsers.

a guest Nov 2nd, 2012 1,382 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <DOCTYPE HTML>
  2. <html>
  3.   <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <script type='text/javascript'>
  6.  
  7.       function test(){
  8.         var cvs = document.getElementById('myCanvas');
  9.         cvs.height = parseInt(document.getElementById("canvasHeight").value);
  10.        
  11.         var ctx = cvs.getContext("2d");
  12.         ctx.font = "50pt bold colibri";
  13.         ctx.fillText("It works", 0, 50);
  14.        
  15.         var inMemoryCanvas = document.createElement("canvas");
  16.         try {
  17.           inMemoryCanvas.height = cvs.height
  18.           var tctx = inMemoryCanvas.getContext("2d");
  19.           ctx.fillText("In memory canvas works", 0, 100);
  20.         } catch (e) {          
  21.           ctx = inMemoryCanvas.getContext("2d");
  22.           ctx.fillText("In memory canvas failed:", 0, 100);        
  23.         }
  24.       }
  25.  
  26.     </script>
  27.   </head>
  28.   <body>
  29.     <table border=1>
  30.       <tr><th>Browser</th><th>Max Height</th><th>Max In Memory Height</th></tr>
  31.       <tr><td>Chrome 22.0.1229.94</td><td>32767</td><td>32767</td></tr>
  32.       <tr><td>Firefox 16.0.2</td><td>32767</td><td>32767</td></tr>
  33.       <tr><td>IE 9</td><td>Inifinity</td><td>Inifinity</td></tr>
  34.     </table><br>
  35.     <input type="number" id="canvasHeight"></input>
  36.     <button onclick="test()">Test</button><br>
  37.     <canvas id="myCanvas" width="800" height="300"></canvas>
  38.   </body>
  39. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top