Drawing a Circle using Javascript directly

code unknown

unread,

Mar 26, 2013, 4:22:55 PM3/26/13

to pap...@googlegroups.com

Hi,

how can I draw a circle directly using a javascript function?

When using paperscript following code works:

var myCircle = new Path.Circle(new Point(20,20), 5);

myCircle.strokeColor = 'red';

var myPath = new Path();

myPath.strokeColor = 'black';

myPath.moveTo(new Point(0,0));

myPath.lineTo(new Point(40,40));

</script>

But how does this code has to look like to work in the window.onload function as described in

http://paperjs.org/tutorials/getting-started/using-javascript-directly/

Drawing Lines works, but the Circle is just not drawn.

Thanks in advance,

Joe

philip wasserman

unread,

Mar 28, 2013, 11:21:21 AM3/28/13

to pap...@googlegroups.com

JavaScript sample code:

var cenPoint = new Point(20, 20);

var pathCircle = new paper.Path.Circle(cenPoint, 10);

hope this help

philip

code unknown

unread,

Mar 29, 2013, 1:28:33 PM3/29/13

to pap...@googlegroups.com

Hi philip,

thank you, but your code does not work for me.

Here is the complete example:

<html>

<head>

window.onload = function() {

var canvas = document.getElementById('myCanvas');

paper.setup(canvas);

var path = new paper.Path();

path.strokeColor = 'black';

var start = new paper.Point(100, 100);

path.moveTo(start);

path.lineTo(start.add([ 200, -50 ]));

var cenPoint = new Point(20, 20);

var pathCircle = new paper.Path.Circle(cenPoint, 10);

paper.view.draw();

}

</script>

</head>

<body>

</body>

</html>

The line is drawn but the circle isn't.

I've tried a lot of different things but I couldn't figure out how it is done.

Could you please correct the above sample code?

Thanks,

Joe

Alex Blackwood

unread,

Mar 29, 2013, 2:03:05 PM3/29/13

to pap...@googlegroups.com

When describing cenPoint, you're forgetting to add the paper scope. Also, pathCircle has no fill or stroke color applied. Here's the corrected code:

<html>

<head>

window.onload = function() {

var canvas = document.getElementById('myCanvas');

paper.setup(canvas);

var path = new paper.Path();

path.strokeColor = 'black';

var start = new paper.Point(100, 100);

path.moveTo(start);

path.lineTo(start.add([ 200, -50 ]));

var cenPoint = new paper.Point(20, 20);

var pathCircle = new paper.Path.Circle(cenPoint, 10);

pathCircle.strokeColor = 'black';

paper.view.draw();

}

</script>

</head>

<body>

</body>

</html>

code unknown

unread,

Mar 29, 2013, 2:49:39 PM3/29/13

to pap...@googlegroups.com

Hi Alex,

thanks, but does this code really work for you?

On my machine still only the line is shown but not the circle!

I'm using Paper.js v0.8.

Thanks,

Joe

philip wasserman

unread,

Mar 29, 2013, 2:54:55 PM3/29/13

to pap...@googlegroups.com

Hi

hope this helps, need to add paper.install(window); to the script as well/

window.onload = function() {

var canvas = document.getElementById('myCanvas');

paper.install(window); // need to add

paper.setup(canvas);

var path = new paper.Path();

path.strokeColor = 'black';

var start = new paper.Point(100, 100);

path.moveTo(start);

path.lineTo(start.add([ 200, -50 ]));

var cenPoint = new paper.Point(20, 20);

var pathCircle = new paper.Path.Circle(cenPoint, 10);

pathCircle.strokeColor = 'black';

paper.view.draw();

philip

On Tuesday, March 26, 2013 4:22:55 PM UTC-4, code unknown wrote:

Alex Blackwood

unread,

Mar 29, 2013, 3:11:39 PM3/29/13

to pap...@googlegroups.com

Huh. Oddly enough, my attempt above works fine for me without adding the paper.install() function. I'm using Chrome 26.0.1410.43 with the nightly version of paper.js. Although I did neglect to mention that I changed the path to paper.js to match my test setup.

code unknown

unread,

Mar 29, 2013, 6:43:23 PM3/29/13

to pap...@googlegroups.com

Ok, it is working now (without paper.install(window);).

Looks like it was a Bug in Chrome 25.x.x.x! It's working with Version 26.0.1410.43 and Firefox.

Thanks all for you help!

Reply all

Reply to author

Forward