This is my very first experiment with paper.js and it's not working please guide me

Rishi Patni

unread,

Aug 11, 2016, 11:47:34 PM8/11/16

to Paper.js

This is my very first experiment with paper.js and it's not working please guide me I'm adding paper.js with CDN I'm just trying to draw a circle on canvas

below are copy of my code and I also add output as attachment please find attached screenshot.

1 index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="main.css" rel="stylesheet" type="text/css" />
<title>Untitled Document</title>
</head>

<body>
<h1>My First Application</h1>

<canvas id="mainCanvas"></canvas>
<script
            src="https://code.jquery.com/jquery-2.1.1.min.js"
            integrity="sha256-h0cGsrExGgcZtSZ/fRz4AwV+Nn6Urh/3v3jFRQ0w9dQ="
            crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.24/paper-full.min.js"></script>
<script src="main.js"></script>
</body>
</html>

<<....................................................................................................>>

2. main.css

@charset "utf-8";
/* CSS Document */

#mainCanvas{ width:400px; height:400px; border:solid 1px black;}

<<......................................................................................................>>

3.main.js

// JavaScript Document
$document.ready(function(){
    'use strict';
    paper.install(window);
    paper.setup(document.getElementById('mainCanvas'));


    var c = Shape.Circle(200, 200, 50);
    c.fillColor = 'green';


    paper.view.draw();
});

screenshot-{domain} {date} {time}.png

Giles Pepper

unread,

Aug 12, 2016, 4:36:55 AM8/12/16

to Paper.js

Hi Rishi - here is a fiddle of more or less what you are doing - https://jsfiddle.net/tbjs/qshzpmvs/ - hope it helps :)

Rishi Patni

unread,

Aug 13, 2016, 9:38:55 AM8/13/16

to Paper.js

Thanks a lot for link of fiddle now I can do some practice @:-)

But same codes that are working in fiddle are still not working in my browser and I don't know why@:-( I'm using adobe dreamweaver to edit and latest mozilla firefox browser. can suggest something for this issue?

Giles Pepper

unread,

Aug 14, 2016, 5:18:17 PM8/14/16

to Paper.js

did you change this line

var c = Shape.Circle(200, 200, 50);

to this

var c = paper.Shape.Circle(200, 200, 50);

?

Rishi Patni

unread,

Aug 15, 2016, 2:18:07 AM8/15/16

to Paper.js

Dear Giles,

Yes I did this change and it's still not working in my browser so I know some thing is missing but what@":-(??) as I'm doing this on my own and no one's here to guide me.

And Thanks for your reply.

Reply all

Reply to author

Forward