Canvas How to - Compare scaled image

Question

We would like to know how to compare scaled image.

Answer


<!--  w  ww. j  a va 2  s  .  co  m-->
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.3.js'></script>
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
    var img = new Image();
    img.src = 'http://www.java2s.com/style/download.png';
    img.onload = function () { 
        $('canvas').each(function () {
            var ctx = this.getContext("2d");
            ctx.scale(this.width/64, this.height/64);
            ctx.fillStyle = ctx.createPattern(img, 'repeat');
            ctx.fillRect(0, 0, 64, 64);
        });
    };
});//]]>  
</script>
</head>
<body>
<canvas id='a' width='32' height='32'></canvas>
<canvas id='a' width='64' height='64'></canvas>
<canvas id='b' width='256' height='256'></canvas>
<canvas id='b' width='512' height='512'></canvas>
</body>
</html>

The code above is rendered as follows: