Introduction to shapes using Processing JS library

Processing JS is a a tool in Javascript which creates 2D and 3D drawings on the web.  Processing.js can be thought of as just such a library, simplifying the use of the 2D and 3D canvas operations.

Download the processing Library from the following link  

You need to link the processing.js file to your HTML page.

<script type="text/javascript" src="js/processing.js"></script>

Create canvases in your HTML page.

<canvas id="rectangle" width="200" height="200"></canvas>
<canvas id="triangle" width="300" height="300"></canvas>
<canvas id="ellipse" width="300" height="300"></canvas>

Use a custom script to create drawings in the canvas in the HTML page.  In the script load the Processing object and override its draw method to draw our own drawings in the page.

var rectangle = document.getElementById("rectangle");
 var p = new Processing(rectangle, function (processing) {
     processing.rect(20, 20, 40, 40);
 });

 var triangle = document.getElementById("triangle");
 var p = new Processing(triangle, function (processing) {
     processing.triangle(20, 20, 60, 60, 90, 20);
 });

 var ellipse = document.getElementById("ellipse");
 var p = new Processing(ellipse, function (processing) {
     processing.draw = function () {
         processing.background(224);
         processing.fill(100, 200, 100);
         processing.line(0, 0, 100, 100);
         processing.ellipse(50, 50, 50, 40);
         processing.fill(200, 200, 100);
         processing.rect(20, 50, 40, 40);
     }
});

We have used the shapes rectangle, triangle, line, ellipse in this example. The output looks like this now.

This is just a basic example, we can do many high level drawings using processing.js. For more information we can look into http://processingjs.org/articles/jsQuickStart.html