Stroke dashOffset behaves wrong in Safari?

[Ricardo Crespo]

Hello everybody,
I'm quite new in programming and paper.js has surprised me with its functionalities for graphics programming even being a beginner, so first of all thank you for this great framework :)

I wanted to create an application for education that animates line drawings using dashOffset and dashArray like in this tutorial:
http://jakearchibald.com/2013/animated-line-drawing-svg/

I found that Safari doesn't behave correctly unlike Chrome or Firefox.
I used this test code in the online editor for animating the drawing of a circle.

var path = new Path.Circle({
    center: [80, 50],
    radius: 40,
    strokeWidth: 2,
    strokeColor: 'black'
});
//Initialize
var length = path.length;
var progress = length;
path.dashArray = [length,length];

//Drag in order to see animation
function onMouseDrag(event){
    path.dashOffset = progress;
    progress = progress - (event.delta.x/5);  
}

In Chrome and Firefox the circle is drawn as expected, but in Safari the drawing starts going backwards.
If you continue decreasing dashOffset after the first completed circle, Safari starts to overwrite strokes in a strange manner.

I don't know if this fact is important, but I wanted this code to be executed inside an iBooks HTML widget. When I tested the widget in Ipad 4, it behaves right, but in Ipad 1 it behaves like in Safari.

Thanks,
Ricardo

[Jürg Lehni]

This sounds like you spotted a bug in the way we're emulating dashOffset and dashArray on browsers that don't support it.

I shall look into it!

Jürg

> --
> You received this message because you are subscribed to the Google Groups "Paper.js" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to paperjs+u...@googlegroups.com.
> For more options, visit https://groups.google.com/groups/opt_out.

[Ricardo Crespo]

Thank you for the answer.

At last I was able to achieve the same effect using the split() function, and seems to work very well inside ibooks widget.

[Jürg Lehni]

I just fixed this issue, in case you'd like to use the original approach:

https://github.com/paperjs/paper.js/issues/303

Best,

Jürg