paper.js basics

a simple paper.js example for forking.

HTML

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-full.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <canvas id="canvas1"></canvas>
  <canvas id="canvas2"></canvas>
</body>
</html>

JavaScript

window.onload = function() {
var scope1 = new paper.PaperScope();
  var scope2 = new paper.PaperScope();
  //
  scope1.setup(document.getElementById('canvas1'));
  scope2.setup(document.getElementById('canvas2'));
  
  // ACTIVATE SCOPE # 1
  scope1.activate()
  url1 = 'https://i1.kknews.cc/SIG=2bdhn4u/2p270005158rrs6o2nno.jpg';
  paper.view.viewSize = new paper.Size(770, 570); // 設置 canvas 大小
  rast = new paper.Raster(url1); // 繪製圖片
  rast.position = paper.view.center; // 圖片置中
  // ACTIVATE SCOPE # 2
  scope2.activate()
  url1 = 'https://i1.kknews.cc/SIG=otd7ba/2p2n0004po80sp87p010.jpg';
  paper.view.viewSize = new paper.Size(200, 150); // 設置 canvas 大小
  rast = new paper.Raster(url1); // 繪製圖片
  rast.position = paper.view.center; // 圖片置中
	/* var scope1 = new paper.PaperScope();
	  var scope2 = new paper.PaperScope();
	  $.imgcol();
	  $.vs(); */
}

jQuery(function($){
  $.extend({
    imgcol: function(){
      scope1.setup(document.getElementById('canvas1'));
      scope1.activate();
      url1 = 'https://i1.kknews.cc/SIG=2bdhn4u/2p270005158rrs6o2nno.jpg';
      paper.view.viewSize = new paper.Size(770, 570);
      rast = new paper.Raster(url1);
      rast.position = paper.view.center;
    },
    vs: function(){ 
      scope2.setup(document.getElementById('canvas2'));
      scope2.activate();
      url1 = 'https://i1.kknews.cc/SIG=2bdhn4u/2p270005158rrs6o2nno.jpg';
      paper.view.viewSize = new paper.Size(770, 570);
      rast = new paper.Raster(url1);
      rast.position = paper.view.center;
    }
  })
})