Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

Untitled

By: a guest on Nov 10th, 2010  |  syntax: None  |  size: 4.07 KB  |  views: 220  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. I've just started working with the html5 canvas element.
  2.  
  3. I'm using the latest firefox and chromium browsers.  And so far, they're
  4. responding alike.
  5.  
  6. What I'm trying to achieve is scaling of an image without having to
  7. specify the canvas or image drawing sizes.  I'd like the canvas to fill
  8. the browser window, and for the image to fill the canvas scaling up or
  9. down as needed without specifying any sizes.  And to readjust the canvas
  10. and its image on the fly when the user adjusts the browser's frame.
  11.  
  12. The mansion pic that I'm testing with is 4284x2844.
  13.  
  14. I've managed to achieve dynamic scaling without specifying sizes, but
  15. there's a problem...  if I don't specify sizes the image becomes blurry.
  16.  
  17.  
  18. The first code results in scaling, but I've specified the canvas to some
  19. semi-random h/v sizes.  The whole image is being drawn and scaled accurately.
  20. You can change the browser window size and the image will scale dynamically
  21. as you adjust the browser window.
  22.  
  23. The scaled image seems quite clear at all sizes, and I'm satisfied the way
  24. things are working.
  25.  
  26.  
  27. file: index_01.html
  28.  
  29. <!DOCTYPE HTML>
  30. <html lang="en">
  31.  
  32. <head>
  33.     <title>TABA_01</title>
  34.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  35.     <meta http-equiv="Content-Style-Type" content="text/css" />
  36.     <link href="taba_01.css" rel="stylesheet" type="text/css" />
  37. </head>
  38.  
  39. <body>
  40.  
  41.     <canvas id="taba_main_canvas" width="1000" height="750">
  42.     Your browser does not support the canvas element.
  43.     </ canvas>
  44.  
  45.     <script type="text/javascript">
  46.         var main_canvas=document.getElementById("taba_main_canvas");
  47.         var cxt=main_canvas.getContext("2d");
  48.         var img=new Image();
  49.  
  50.         <!-- mansion pic 4284x2844 -->
  51.         img.src="images/mansion_3344.png";
  52.        
  53.         img.onload = function()
  54.         {
  55.              cxt.drawImage(img,0,0,1000,750);
  56.         }
  57.        
  58.     </script>
  59.  
  60. </body>
  61.  
  62. </html>
  63.  
  64.        
  65. file:  taba_01.css
  66.        
  67. html,body
  68. {
  69.     background-color:#000000;
  70.    
  71.     width:  100%;
  72.     height: 100%;    
  73.    
  74.     /* without a '0px' margin there is a 2 or 3 px margin/border */
  75.     /* that allows a bit of the bg color to border the main canvas */
  76.  
  77.     margin: 0px;
  78.  
  79. }
  80.  
  81.  
  82. /* using width/height of 100% in both the 'html,body' and 'canvas' parameters will */
  83. /* allow the canvas to be scaled during browser window size changes */
  84.  
  85.  
  86. #taba_main_canvas
  87. {
  88.         width: 100%; height: 100%;
  89. }
  90.        
  91.  
  92. ******************************************************************
  93. Now, the problem...
  94.  
  95. When I take out size specifications the image scales as before, but
  96. the image is very blurry and seems to be somewhat blocky at a
  97. very small level, and there seems to be random colored noise in the
  98. image.  The same image was nice and clear before.
  99.  
  100.  
  101.  
  102. file: index_02.html
  103.  
  104. <!DOCTYPE HTML>
  105. <html lang="en">
  106.  
  107. <head>
  108.     <title>TABA_01</title>
  109.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  110.     <meta http-equiv="Content-Style-Type" content="text/css" />
  111.     <link href="taba_02.css" rel="stylesheet" type="text/css" />
  112. </head>
  113.  
  114. <body>
  115.  
  116.     <canvas id="taba_main_canvas">
  117.     Your browser does not support the canvas element.
  118.     </ canvas>
  119.  
  120.  
  121.     <script type="text/javascript">
  122.         var main_canvas=document.getElementById("taba_main_canvas");
  123.         var cxt=main_canvas.getContext("2d");
  124.         var img=new Image();
  125.  
  126.         <!-- mansion pic 4284x2844 -->
  127.         img.src="images/mansion_3344.png";
  128.        
  129.         img.onload = function()
  130.         {
  131.               cxt.drawImage(img,0,0,main_canvas.width,main_canvas.height);  
  132.         }
  133.        
  134.     </script>
  135.  
  136. </body>
  137.  
  138. </html>
  139.  
  140.        
  141. file: taba_02.css
  142.  
  143. /* taba_02.css - style sheet for index_02.html */
  144.  
  145. html,body
  146. {
  147.     background-color:#000000;
  148.    
  149.     width:  100%;
  150.     height: 100%;    
  151.  
  152.     margin: 0px;
  153. }
  154.  
  155.  
  156. #taba_main_canvas
  157. {
  158.     width: 100%;
  159.     height: 100%;
  160. }
  161.  
  162.  
  163.  
  164. The full image is drawn and scales, only now, the image is not clear.
  165. Any ideas on what I'm doing wrong, and/or why the image is now unclear?
  166.  
  167. Thanks