See fiddle here: /

On my PC, doing

ctx.lineWidth=20;
ctx.setLineDash([20,30]); 
ctx.lineDashOffset=10;
ctx.beginPath();
ctx.moveTo(150,150);
ctx.lineTo(240,240);
ctx.lineTo(180,40);
ctx.stroke();
ctx.closePath()

Gives the first set of lines, with the desired dashes/offsets

Now with

ctx.setLineDash([0,0]); 
ctx.lineDashOffset=0

in the next batch of commands:

ctx.beginPath();
//resets line dash... except on iOS Safari it seems...
ctx.setLineDash([0,0]); 
ctx.lineDashOffset=0;
ctx.moveTo(0,300);
ctx.lineTo(0,250);
ctx.lineTo(100,400);
ctx.lineTo(200,300);
ctx.stroke();
ctx.closePath()

After the first set of lines seems to reset any dash properties. Get solid lines again

On an iPad2 running Safari... it seems completely ignored, the lines stay dashed. Why is this? Also, is there some other method to properly resetting line dashes...? (preferably working cross browser/OS)

Thanks

See fiddle here: http://jsfiddle.net/mYdm9/4/

On my PC, doing

ctx.lineWidth=20;
ctx.setLineDash([20,30]); 
ctx.lineDashOffset=10;
ctx.beginPath();
ctx.moveTo(150,150);
ctx.lineTo(240,240);
ctx.lineTo(180,40);
ctx.stroke();
ctx.closePath()

Gives the first set of lines, with the desired dashes/offsets

Now with

ctx.setLineDash([0,0]); 
ctx.lineDashOffset=0

in the next batch of commands:

ctx.beginPath();
//resets line dash... except on iOS Safari it seems...
ctx.setLineDash([0,0]); 
ctx.lineDashOffset=0;
ctx.moveTo(0,300);
ctx.lineTo(0,250);
ctx.lineTo(100,400);
ctx.lineTo(200,300);
ctx.stroke();
ctx.closePath()

After the first set of lines seems to reset any dash properties. Get solid lines again

On an iPad2 running Safari... it seems completely ignored, the lines stay dashed. Why is this? Also, is there some other method to properly resetting line dashes...? (preferably working cross browser/OS)

Thanks

• javascript
• ios
• html
• canvas
• safari

• I think there is no support for setLineDash on mobile safari (iOS), at least in 6.x – tomasdev Commented Feb 25, 2014 at 20:02

2 Answers 2

Use this notation, it will work in all browsers that supports setLineDash

ctx.setLineDash([]);

I ran into similair behaviour, the only way to make Safari reset the lineDash was to use context.restore().

Adding

ctx.restore();

before drawing your non-dashed lines will work.

You will then have to reset other things like lineWidth off course.