Introduction to shapes using Processing JS library

posted in: Javascript | 1

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.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

  1. blog

    My programmer is trying to persuade me to move
    to .net from PHP. I have always disliked the idea because of the costs.
    But he’s tryiong none the less. I’ve been using Movable-type on a number of websites
    for about a year and am worried about switching to another platform.
    I have heard good things about

    Is there a way I can import all my wordpress content into it?
    Any help would be really appreciated!

Leave a Reply