Disable Interpolation when Scaling a <canvas> - Javascript Canvas

Javascript examples for Canvas:Animation

  1. HOME
  2. Javascript
  3. Canvas
  4. Animation

Description

Disable Interpolation when Scaling a <canvas>

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.6.3.js"></script> 
      <style id="compiled-css" type="text/css">

canvas, img {//from w w  w. jav a2  s.  c  o  m
   image-rendering: optimizeSpeed;
   image-rendering: -moz-crisp-edges;
   image-rendering: -webkit-optimize-contrast;
   image-rendering: optimize-contrast;
   -ms-interpolation-mode: nearest-neighbor;
   border: 5px solid #ddd;
}
canvas#b { width: 256px; height: 256px; } /* 4 * 64 = 256 */


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
var img = new Image();
img.src = 'http://upload.wikimedia.org/wikipedia/commons/f/f0/Pixelart-tv-iso.png';
img.onload = function () {
    $('canvas').each(function () {
        var ctx = this.getContext("2d");
        ctx.drawImage(img, 0, 0);
    });
};
    });

      </script> 
   </head> 
   <body> 
      <canvas id="a" width="64" height="64"></canvas> 
      <canvas id="b" width="64" height="64"></canvas>  
   </body>
</html>

Related Tutorials