Search code examples
javascriptvectorpaperjs

Paper.js seems to be plotting wrong points

Here is my PaperScript code:

var path = new Path();
path.strokeColor = 'black';
var start = new Point(0, 0);
var endme = new Point(0, 100);
var endbg = new Point(100, 200);
path.moveTo(start);
path.lineTo(start + endme);
path.lineTo(start + endbg);

and this is the CodePen demo:http://codepen.io/anon/pen/ONreGQ

The first 100 pixels in y direction seem to be much longer than the next 100 pixels drawn to next slanted point. Am I misunderstanding something?

A link to the library : http://paperjs.org/tutorials/paths/working-with-path-items/

Solution

  • Your code is correct. The problem seems to be with the scaling of the canvas. If you add for example a width and height to the canvas, the graphic changes.

    <canvas id="myCanvas" width=200 height=200 resize></canvas>