scale an imageData in HTML canvas? - Javascript Canvas

Javascript examples for Canvas:image

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

Description

scale an imageData in HTML 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.4.2.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//from w  ww  .  j a  v  a2s .  c  o m
var srcCtx = $("#src")[0].getContext("2d");
srcCtx.fillRect(0, 0, 50, 50);
var imageData = srcCtx.getImageData(0, 0, 100, 100);
var destCtx = $("#dest")[0].getContext("2d");
var newCanvas = $("<canvas>")
    .attr("width", imageData.width)
    .attr("height", imageData.height)[0];
newCanvas.getContext("2d").putImageData(imageData, 0, 0);
destCtx.scale(1.5, 1.5);
destCtx.drawImage(newCanvas, 0, 0);
    });

      </script> 
   </head> 
   <body> 
      <canvas id="src" width="100" height="100"></canvas> 
      <canvas id="dest" width="100" height="100"></canvas>  
   </body>
</html>

Related Tutorials