resize a raster image in paper.js? - Javascript Canvas

Javascript examples for Canvas:image

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

Description

resize a raster image in paper.js?

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Raster new method</title> 
      <style>

#myCanvas {//  ww w . j  ava2 s .c o  m
   width: 800px;
   height: 400px;
}


      </style> 
   </head> 
   <body translate="no"> 
      <canvas id="myCanvas" resize></canvas> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-core.js"></script> 
      <script>
      $(function() {
    paper.setup(document.getElementById('myCanvas'));
    paper.Raster.prototype.rescale = function(width, height) {
        this.scale(width / this.width, height / this.height);
    }
    var raster = new paper.Raster({
        source: 'http://assets.paperjs.org/images/marilyn.jpg',
        position: paper.view.center
    });
    paper.view.draw();
    setTimeout(() => {
        raster.rescale(200, 100);
    }, 1000);
});
    
      </script>  
   </body>
</html>

Related Tutorials