HTML5 Canvas w/ Paper.js (from: Learning JS book 3e)

In this example below you will see how to do a HTML5 Canvas w/ Paper.js (from: Learning JS book 3e) with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 1Elral4, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 1Elral4 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>HTML5 Canvas w/ Paper.js (from: Learning JS book 3e)</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <head>
</head>

<body>
  <canvas id="mainCanvas"></canvas>
  
  
</body>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.24/paper-full.min.js"></script>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/1Elral4/html5-canvas-with-paperjs-from-learning-js-book-3e-VmdYBP */
#mainCanvas {
 width: 400px;
 height: 400px;
 border: solid 3px black;
}

/*Downloaded from https://www.codeseek.co/1Elral4/html5-canvas-with-paperjs-from-learning-js-book-3e-VmdYBP */
$(document).ready(function(){
  paper.install(window);
  paper.setup(document.getElementById('mainCanvas'));
  
//   First example
  
  // var c = Shape.Circle(200, 200, 50);
  // c.fillColor = 'green';
  
//   Second example
  // var c;
  // for(var x=25; x<400; x+=50) {
  //  for(var y=25; y<400; y+=50) {
  //  c = Shape.Circle(x, y, 20);
  //  c.fillColor = 'green';
  //  }
  // }
  
//   Third example
  var tool = new Tool();
//   Forth
  var c = Shape.Circle(200, 200, 80);
c.fillColor = 'black';
var text = new PointText(200, 200);
text.justification = 'center';
text.fillColor = 'white';
text.fontSize = 20;
text.content = 'hello world';
//   End of forth
  tool.onMouseDown = function(event) {
  var c = Shape.Circle(event.point.x, event.point.y, 20);
  c.fillColor = 'green';
  };
  
  
  paper.view.draw();
  
  
  
});

Comments