Performance issue : canvas seems to be redrawing on addition of every Path.

[codein...@gmail.com]

Hello guyz,

I see performance issue when lot of path points are added. When there are far too little points, the curves are very smooth. However when canvas has added moderate number of points the curves seems to become sharp because of performance impact. I noticed the paper js clears the entire canvas and draws the view again. This happens on every mouse move.
Here is the summary of my application --

1. canvas assigns mouse event listenenrs
2. onMouseDown - paper.Path is initialized
3. onMouseMove - a point is plotted using paper.Point
4. onMouseUp -  the path is simplfied and smoothen.

Here is the snippet of the code I debugged in your full version of js.  line - 11578 onwards

CanvasView :

update: function(force) {
        var project = this._project;
        if (!project || !force && !project._needsUpdate)
            return false;
        var ctx = this._context,
            size = this._viewSize;
        ctx.clearRect(0, 0, size.width + 1, size.height + 1);
        project.draw(ctx, this._matrix, this._pixelRatio);
        project._needsUpdate = false;
        return true;
    }

This update method is called by paper js.

As number of points grow, the performance is extremely degraded. How can I improve this to make it acceptable performance?

[codein...@gmail.com]

Is there a way to incrementally add points in Path without making paperjs redraw the entire layer?

[sapics]

Although this is not a cool way, how about "project._needsUpdate = false" after adding point?

Or, it might be better to use latest paperjs v0.10.2.

2016年7月12日火曜日 13時12分04秒 UTC+9 codein...@gmail.com:

[codein...@gmail.com]

@sapics

Ya i have tried resetting _needsUpdate but that doesn't work. I have upgraded to the lates paperjs code but that still seems to be drawing all the segments in the active layer.

[sapics]

Sorry, I miss-understood about your question.

Currently, paperjs draws in one canvas element.

It is good for less-memory usage.

If you want to render each layer or item separately, I guess that you need to create canvas elements for each layer or item.

2016年7月16日土曜日 14時45分34秒 UTC+9 codein...@gmail.com:

[sapics]

Above is not accurate expression...

One project draws in one canvas element.

Thus, you can draw each item separately by creating project for each item.

2016年7月16日土曜日 15時07分37秒 UTC+9 sapics:

[codein...@gmail.com]

I see performance impact only on the layer that has lot of points/segments. Other layers are not impacted and they draw smoothly as long as those do not have lot of points.  So I didn't quite understand the need for canvas for different layers.

Regardless of different layers, the performance issue happens even if there is only 1 layer which is the absolute basic and most common use case. You have 1 canvas and you setup paperjs on the canvas element. You define mouse events to draw points on it. These points are part of paper.Path.  After certain time, there is considerable amount of performance degradation and drawing experience is not good anymore. 

[sapics]

Sorry, I am not good at English.

I have not understand your English yet :)

I have tried to answer the question

> Is there a way to incrementally add points in Path without making paperjs redraw the entire layer?

by

> you can draw each item separately by creating project for each item.

I guess that you could "avoid redrawing the entire layer" in this way, if my English is correct :)

Anyway, I would like to wait other person who can answer with better English :)

2016年7月17日日曜日 2時13分19秒 UTC+9 codein...@gmail.com: