I am trying to implement a simple painting tool in javascript for freehand drawing over SVG. For free hand I am using a polyline while drawing and once the drawing is completed I am trying to make a curve out of it just like google drawing for smoothening of the curve.
And of course I haven’t devised a nice smoothening logic for real or even tried so far. What I am using currently is taking one in every four points of the polyline to create a curve out of it. This may be a bad approach but this is the first thing I thought worth trying.
<path stroke="black" opacity="1" stroke-width="10" shape-rendering="geometric-precision" fill="none" d="M 1452 559 C 1452 556 1317 518 1308 521 1296 528 1289 537 1281 542 1277 549 1272 559 1267 566 1265 578 1265 585 1263 592 1263 599 1260 606 1258 616 1253 627 1248 639 1244 656"> </path>
But in chrome I am getting this error
Problem parsing d="M 1452 559 C 1452 ...
But it is rendering everything on the SVG. I just want to know why it is happening and only in chrome.
This is not an error from chromium. The Bezier curve needs 2 control points and end point, which means minimum 3 points other than the starting point, and for a sequence of curves the number of points should be a multiple of 3 as the starting point of a curve be the ending point of previous.
When the points are not in the multiple of 3, chrome throws an error but still renders it.