Forums

Hello

Greetings for the day

We have used Diagram(DRAW PEN - See this screenshot https://prnt.sc/MvihQ0DvIOc5) feature with myscript using vue JS.

We used this tool on web (see screenshot - https://prnt.sc/kZeGdePJgSdM) and working fine.

But we need to show this same strokes at same position on PDF also. See this screenshot we required here: https://prnt.sc/Snh2Uqscn8_O

we have use this tool on question answering feature to do rough work for user.

We have stored this strokes on database in JSON format.

See this:

{"628":"[{\"penStyle\":{\"color\":\"rgba(255,26,64,1)\"},\"strokes\":[{\"type\":\"stroke\",\"x\":[683,683,683,682,677,658],\"y\":[66,69,73,82,90,104],\"t\":[1650600786561,1650600786689,1650600786702,1650600786719,1650600786735,1650600786752],\"p\":[0.5,0.8267949192431123,0.7145158745241171,0.811690865715624,0.8154611476232471,0.514192965855661],\"l\":[0,3,7,16.055385138137417,25.48936627019402,49.090213712605916],\"width\":1.8897637795275593,\"pointerType\":\"mouse\",\"pointerId\":1,\"color\":\"rgba(255,26,64,1)\",\"-myscript-pen-width\":1,\"-myscript-pen-fill-style\":\"none\",\"-myscript-pen-fill-color\":\"#FFFFFF00\"},{\"type\":\"stroke\",\"x\":[683,682,676,666,647,622,605,591,576,569,566,564,561],\"y\":[81,78,76,73,73,73,73,76,83,88,92,97,106],\"t\":[1650600787705,1650600787761,1650600787786,1650600787802,1650600787819,1650600787835,1650600787852,1650600787869,1650600787886,1650600787903,1650600787919,1650600787936,1650600787953],\"p\":[0.5,0.8221720589961077,0.7728798232191826,0.7981482737733834,0.5641101056459326,0.5,0.587689437438234,0.6216110326228266,0.5931468894398514,0.8067411006940866,0.7436746598382117,0.7531128489300326,0.8159623787273663],\"l\":[0,3.1622776601683795,9.486832980505138,19.927139489415687,38.92713948941569,63.92713948941569,80.92713948941568,95.24496055269204,111.79790590993889,120.40023117698152,125.40023117698152,130.78539598411604,140.27222896462118],\"width\":1.8897637795275593,\"pointerType\":\"mouse\",\"pointerId\":1,\"color\":\"rgba(255,26,64,1)\",\"-myscript-pen-width\":1,\"-myscript-pen-fill-style\":\"none\",\"-myscript-pen-fill-color\":\"#FFFFFF00\"},{\"type\":\"stroke\",\"x\":[694,697,701,704,711,720,731,739,743,746,750,756,761,770,778,786,794,803],\"y\":[97,94,89,86,80,72,67,64,62,62,62,63,67,73,80,87,96,106],\"t\":[1650600788936,1650600788986,1650600789019,1650600789035,1650600789052,1650600789069,1650600789086,1650600789102,1650600789119,1650600789136,1650600789153,1650600789169,1650600789187,1650600789202,1650600789218,1650600789235,1650600789252,1650600789269],\"p\":[0.5,0.7940232856092883,0.774350629289587,0.7222966378316396,0.8133650328603405,0.6529899918043818,0.6523932398011429,0.8060672826037246,0.7292125754002905,0.6761535882018319,0.7145158745241171,0.7681880209236327,0.774350629289587,0.6711131832013941,0.6739609561304866,0.6739609561304866,0.6529899918043818,0.6332081782935488],\"l\":[0,4.242640687119285,10.645764924552132,14.888405611671416,24.107950068964303,36.1495446477566,48.23259062135117,56.776594366668704,61.24873032166828,64.24873032166829,68.24873032166829,74.33149285196652,80.73461708939936,91.55127091579133,102.18141672852599,112.81156254126064,124.85315712005294,138.30678116712664],\"width\":1.8897637795275593,\"pointerType\":\"mouse\",\"pointerId\":1,\"color\":\"rgba(255,26,64,1)\",\"-myscript-pen-width\":1,\"-myscript-pen-fill-style\":\"none\",\"-myscript-pen-fill-color\":\"#FFFFFF00\"},{\"type\":\"stroke\",\"x\":[549,549,552,563,580,603],\"y\":[24,20,18,12,4,-3],\"t\":[1650600790225,1650600790289,1650600790302,1650600790319,1650600790335,1650600790352],\"p\":[0.5,0.8,0.7007103955941203,0.7082336428548531,0.5665453399944126,0.5096773454107733],\"l\":[0,4,7.60555127546399,20.135515361605655,38.92380958966159,62.9654401500042],\"width\":1.8897637795275593,\"pointerType\":\"mouse\",\"pointerId\":1,\"color\":\"rgba(255,26,64,1)\",\"-myscript-pen-width\":1,\"-myscript-pen-fill-style\":\"none\",\"-myscript-pen-fill-color\":\"#FFFFFF00\"},{\"type\":\"stroke\",\"x\":[847,850,855,857,859,861,861,861,861,859,852,841,835,832,827,823,821,819,818,818,820,823,825,830,834,837],\"y\":[217,215,212,208,203,196,188,181,174,169,162,157,158,163,173,188,203,219,234,245,254,258,261,261,259,256],\"t\":[1650600791729,1650600791752,1650600791786,1650600791819,1650600791835,1650600791852,1650600791869,1650600791885,1650600791902,1650600791919,1650600791936,1650600791953,1650600791986,1650600792002,1650600792019,1650600792036,1650600792052,1650600792069,1650600792087,1650600792102,1650600792120,1650600792136,1650600792152,1650600792187,1650600792202,1650600792216],\"p\":[0.5,0.8101171077884058,0.763022254896924,0.7292125754002905,0.7531128489300326,0.7891492414771674,0.7993507587287858,0.78472787299413,0.78472787299413,0.7531128489300326,0.8196747858623284,0.6523932398011429,0.7681880209236327,0.763022254896924,0.665629847511789,0.6059927069677513,0.6109916973839561,0.5984465727129564,0.6122720492616903,0.66833752096446,0.8133650328603405,0.7436746598382117,0.7007103955941203,0.7436746598382117,0.7292125754002905,0.7222966378316396],\"l\":[0,3.605551275463989,9.43650317030929,13.90863912530887,19.293803932443375,26.57391382172389,34.57391382172389,41.57391382172389,48.57391382172389,53.95907862885839,63.85857356547006,75.94161953906463,82.02438206936286,87.85533396420816,99.0356738517071,114.55984854796712,129.69259449838867,145.81710999498577,160.85040637335868,171.85040637335868,181.06995083065158,186.06995083065158,189.67550210611557,194.67550210611557,199.14763806111515,203.39027874823444],\"width\":1.8897637795275593,\"pointerType\":\"mouse\",\"pointerId\":1,\"color\":\"rgba(255,26,64,1)\",\"-myscript-pen-width\":1,\"-myscript-pen-fill-style\":\"none\",\"-myscript-pen-fill-color\":\"#FFFFFF00\"},{\"type\":\"stroke\",\"x\":[834,831,830,829,827,827,827,829,846,861,872,882,888,894,902,908,914,919],\"y\":[251,243,234,224,212,200,189,179,167,163,162,162,164,169,182,198,220,249],\"t\":[1650600792361,1650600792436,1650600792452,1650600792469,1650600792486,1650600792503,1650600792519,1650600792535,1650600792552,1650600792569,1650600792585,1650600792603,1650600792618,1650600792636,1650600792652,1650600792669,1650600792686,1650600792702],\"p\":[0.5,0.7076987214308235,0.811690865715624,0.6829846120277299,0.6512088725240213,0.6535898384862245,0.66833752096446,0.680656313242526,0.5438349854856818,0.6059927069677513,0.6676543814462531,0.683772233983162,0.7728798232191826,0.7968145931762148,0.6093039861673305,0.5866235675484746,0.5224698072165199,0.4575253191242533],\"l\":[0,8.54400374531753,17.59938888345495,27.64926450457584,39.814789565172276,51.814789565172276,62.814789565172276,73.01282859235785,93.82148063904266,109.34565533530268,120.39101635248994,130.39101635248994,136.7155716728267,144.52582134873336,159.7901588712071,176.87816636184215,199.6816748638249,229.10955280294922],\"width\":1.8897637795275593,\"pointerType\":\"mouse\",\"pointerId\":1,\"color\":\"rgba(255,26,64,1)\",\"-myscript-pen-width\":1,\"-myscript-pen-fill-style\":\"none\",\"-myscript-pen-fill-color\":\"#FFFFFF00\"},{\"type\":\"stroke\",\"x\":[51,54,54,55,57,59,60,62,63,64,66,66,66,67,68,68,68,68,68,65,58],\"y\":[230,229,234,241,249,262,273,283,292,299,306,313,323,329,334,337,340,337,333,318,283],\"t\":[1650600794344,1650600794386,1650600794402,1650600794419,1650600794435,1650600794452,1650600794469,1650600794485,1650600794502,1650600794519,1650600794536,1650600794552,1650600794569,1650600794585,1650600794602,1650600794619,1650600794652,1650600794705,1650600794719,1650600794735,1650600794752],\"p\":[0.5,0.8221720589961077,0.7436746598382117,0.785875329883628,0.8024894359144054,0.6373300889518693,0.6676543814462531,0.680656313242526,0.811690865715624,0.785875329883628,0.7891492414771674,0.78472787299413,0.683772233983162,0.7681880209236327,0.7461846839143089,0.6761535882018319,0.6761535882018319,0.6761535882018319,0.7145158745241171,0.6088854574325016,0.4025626677621368],\"l\":[0,3.1622776601683795,8.16227766016838,15.233345472033855,23.479556723269177,36.63250316123508,47.67786417842234,57.87590320560791,66.93128834374534,74.00235615561081,81.28246604489134,88.28246604489134,98.28246604489134,104.36522857518956,109.46424808878234,112.46424808878234,115.46424808878234,118.46424808878234,122.46424808878234,137.7613066295607,173.4544432247102],\"width\":1.8897637795275593,\"pointerType\":\"mouse\",\"pointerId\":1,\"color\":\"rgba(255,26,64,1)\",\"-myscript-pen-width\":1,\"-myscript-pen-fill-style\":\"none\",\"-myscript-pen-fill-color\":\"#FFFFFF00\"},{\"type\":\"stroke\",\"x\":[85,86,88,89,90,91,91,91,91,91,91,91,89,88,87,87],\"y\":[155,165,174,181,192,207,227,249,271,292,307,321,334,341,347,343],\"t\":[1650600794913,1650600794936,1650600794953,1650600794969,1650600794986,1650600795002,1650600795019,1650600795036,1650600795053,1650600795069,1650600795086,1650600795102,1650600795119,1650600795135,1650600795152,1650600795232],\"p\":[0.5,0.6829846120277299,0.8133650328603405,0.785875329883628,0.6676543814462531,0.6122720492616903,0.552786404500042,0.530958424017657,0.530958424017657,0.5417424305044161,0.6127016653792583,0.6258342613226058,0.6373300889518693,0.785875329883628,0.7681880209236327,0.7145158745241171],\"l\":[0,10.04987562112089,19.269420078413777,26.340487890279253,37.38584890746651,52.41914528583942,72.41914528583942,94.41914528583942,116.41914528583942,137.41914528583942,152.41914528583942,166.41914528583942,179.57209172380533,186.6431595356708,192.72592206596903,196.72592206596903],\"width\":1.8897637795275593,\"pointerType\":\"mouse\",\"pointerId\":1,\"color\":\"rgba(255,26,64,1)\",\"-myscript-pen-width\":1,\"-myscript-pen-fill-style\":\"none\",\"-myscript-pen-fill-color\":\"#FFFFFF00\"}]}]","551":"[{\"penStyle\":{\"color\":\"rgba(26,140,255,1)\"},\"strokes\":[{\"type\":\"stroke\",\"x\":[632,637,641,650,664,668],\"y\":[82,80,79,76,71,70],\"t\":[1650600811249,1650600811319,1650600811335,1650600811352,1650600811369,1650600811386],\"p\":[0.5,0.7679404212893917,0.7185264889882718,0.8159623787273663,0.6144345872965457,0.7185264889882718],\"l\":[0,5.385164807134504,9.508270432752164,18.995103413257304,33.86117216057581,37.98427778619347],\"width\":1.8897637795275593,\"pointerType\":\"mouse\",\"pointerId\":1,\"color\":\"rgba(26,140,255,1)\",\"-myscript-pen-width\":1,\"-myscript-pen-fill-style\":\"none\",\"-myscript-pen-fill-color\":\"#FFFFFF00\"},{\"type\":\"stroke\",\"x\":[683,686,687,687,688,690,691,691,691,691,693,695],\"y\":[52,51,54,61,68,75,80,83,87,90,94,98],\"t\":[1650600811896,1650600812025,1650600812035,1650600812052,1650600812069,1650600812085,1650600812102,1650600812119,1650600812135,1650600812152,1650600812369,1650600812452],\"p\":[0.5,0.8221720589961077,0.6831899108492184,0.78472787299413,0.785875329883628,0.7891492414771674,0.7461846839143089,0.6761535882018319,0.7145158745241171,0.6761535882018319,0.7292125754002905,0.7292125754002905],\"l\":[0,3.1622776601683795,6.324555320336759,13.32455532033676,20.395623132202235,27.675733021482753,32.774752535075535,35.774752535075535,39.774752535075535,42.774752535075535,47.246888490075115,51.719024445074695],\"width\":1.8897637795275593,\"pointerType\":\"mouse\",\"pointerId\":1,\"color\":\"rgba(26,140,255,1)\",\"-myscript-pen-width\":1,\"-myscript-pen-fill-style\":\"none\",\"-myscript-pen-fill-color\":\"#FFFFFF00\"},{\"type\":\"stroke\",\"x\":[718,726,740,748,752,755],\"y\":[59,59,59,58,57,56],\"t\":[1650600812881,1650600813003,1650600813018,1650600813035,1650600813052,1650600813096],\"p\":[0.5,0.7171572875253809,0.6975611910085895,0.800160363181834,0.7185264889882718,0.6831899108492184],\"l\":[0,8,22,30.06225774829855,34.18536337391621,37.34764103408459],\"width\":1.8897637795275593,\"pointerType\":\"mouse\",\"pointerId\":1,\"color\":\"rgba(26,140,255,1)\",\"-myscript-pen-width\":1,\"-myscript-pen-fill-style\":\"none\",\"-myscript-pen-fill-color\":\"#FFFFFF00\"},{\"type\":\"stroke\",\"x\":[722,726,731,762,786,802,809],\"y\":[70,70,70,67,64,62,61],\"t\":[1650600813664,1650600813720,1650600813735,1650600813753,1650600813769,1650600813786,1650600813802],\"p\":[0.5,0.8,0.7436746598382117,0.5120718805639655,0.508199499340478,0.5984465727129564,0.785875329883628],\"l\":[0,4,9,40.14482300479487,64.33159624969052,80.45611174628762,87.5271795581531],\"width\":1.8897637795275593,\"pointerType\":\"mouse\",\"pointerId\":1,\"color\":\"rgba(26,140,255,1)\",\"-myscript-pen-width\":1,\"-myscript-pen-fill-style\":\"none\",\"-myscript-pen-fill-color\":\"#FFFFFF00\"},{\"type\":\"stroke\",\"x\":[813,813,820,827,837,854,873,881,885,885,886,886,886,886,884,876,869,866,863,857,854,851,850,850,850,852,859,873,882,890,893,894,896],\"y\":[38,34,30,25,21,15,12,11,13,16,23,30,40,48,54,62,65,66,66,66,68,69,73,78,81,84,84,83,78,74,70,67,64],\"t\":[1650600814376,1650600814472,1650600814503,1650600814519,1650600814536,1650600814552,1650600814570,1650600814586,1650600814635,1650600814652,1650600814669,1650600814685,1650600814702,1650600814719,1650600814736,1650600814753,1650600814769,1650600814803,1650600814835,1650600814868,1650600814885,1650600814902,1650600814952,1650600814986,1650600815002,1650600815035,1650600815052,1650600815069,1650600815086,1650600815102,1650600815169,1650600815289,1650600815319],\"p\":[0.5,0.8,0.800160363181834,0.8067411006940866,0.6718181965088709,0.57540894525061,0.5614183763349023,0.800160363181834,0.7292125754002905,0.6761535882018319,0.785875329883628,0.78472787299413,0.683772233983162,0.7993507587287858,0.7728798232191826,0.6636414338985142,0.7941045496521526,0.6831899108492184,0.6761535882018319,0.7665225987135362,0.7007103955941203,0.6831899108492184,0.7185264889882718,0.7436746598382117,0.6761535882018319,0.7007103955941203,0.78472787299413,0.6253579195069219,0.6791319563903722,0.8105224395454083,0.7436746598382117,0.6831899108492184,0.7007103955941203],\"l\":[0,4,12.06225774829855,20.664583015341176,31.43491262961018,49.46266900693013,68.69805306860147,76.76031081690002,81.23244677189959,84.23244677189959,91.30351458376506,98.30351458376506,108.30351458376506,116.30351458376506,122.62806990410182,133.94177840308657,141.5575515089505,144.71982916911887,147.71982916911887,153.71982916911887,157.32538044458286,160.48765810475123,164.6107637303689,169.6107637303689,172.6107637303689,176.21631500583288,183.21631500583288,197.2519838534511,207.5476139944381,216.49188590443725,221.49188590443725,224.65416356460562,228.25971484006962],\"width\":1.8897637795275593,\"pointerType\":\"mouse\",\"pointerId\":1,\"color\":\"rgba(26,140,255,1)\",\"-myscript-pen-width\":1,\"-myscript-pen-fill-style\":\"none\",\"-myscript-pen-fill-color\":\"#FFFFFF00\"}]},{\"penStyle\":{\"color\":\"rgba(26,140,255,1)\"},\"strokes\":[{\"type\":\"stroke\",\"x\":[542,546,550,559,564,567,571,574,577,580,583,584,584,584,581,578,575,572,575,578,581,584,585,586,587,587,585,581,578,575,571,566,563,560,557,554,551,548,548],\"y\":[72,71,71,71,72,73,74,76,78,80,85,90,94,97,98,98,98,95,94,94,94,97,100,103,106,109,113,114,116,118,119,121,121,121,121,120,117,114,111],\"t\":[1650600826848,1650600826968,1650600826986,1650600827002,1650600827018,1650600827035,1650600827068,1650600827087,1650600827118,1650600827135,1650600827168,1650600827202,1650600827235,1650600827269,1650600827344,1650600827435,1650600827468,1650600827656,1650600827802,1650600827896,1650600827919,1650600827986,1650600828019,1650600828052,1650600828085,1650600828119,1650600828152,1650600828168,1650600828186,1650600828202,1650600828219,1650600828253,1650600828269,1650600828286,1650600828336,1650600828352,1650600828385,1650600828418,1650600828452],\"p\":[0.5,0.796945681513107,0.7145158745241171,0.8111120608599278,0.7461846839143089,0.6831899108492184,0.7185264889882718,0.7007103955941203,0.7007103955941203,0.7007103955941203,0.763022254896924,0.7461846839143089,0.7145158745241171,0.6761535882018319,0.6831899108492184,0.6761535882018319,0.6761535882018319,0.7222966378316396,0.6831899108492184,0.6761535882018319,0.6761535882018319,0.7222966378316396,0.6831899108492184,0.6831899108492184,0.6831899108492184,0.6761535882018319,0.7292125754002905,0.7185264889882718,0.7007103955941203,0.7007103955941203,0.7185264889882718,0.7531128489300326,0.6761535882018319,0.6761535882018319,0.6761535882018319,0.6831899108492184,0.7222966378316396,0.7222966378316396,0.6761535882018319],\"l\":[0,4.123105625617661,8.123105625617661,17.12310562561766,22.222125139210448,25.384402799378826,29.507508424996487,33.113059700460475,36.71861097592446,40.32416225138845,46.15511414623375,51.254133659826536,55.254133659826536,58.254133659826536,61.416411319994914,64.41641131999492,67.41641131999492,71.65905200711421,74.8213296672826,77.8213296672826,80.8213296672826,85.06397035440189,88.22624801457027,91.38852567473866,94.55080333490704,97.55080333490704,102.02293928990662,106.14604491552427,109.75159619098827,113.35714746645226,117.48025309206992,122.86541789920442,125.86541789920442,128.86541789920443,131.86541789920443,135.0276955593728,139.2703362464921,143.51297693361138,146.51297693361138],\"width\":1.8897637795275593,\"pointerType\":\"mouse\",\"pointerId\":1,\"color\":\"rgba(26,140,255,1)\",\"-myscript-pen-width\":1,\"-myscript-pen-fill-style\":\"none\",\"-myscript-pen-fill-color\":\"#FFFFFF00\"},{\"type\":\"stroke\",\"x\":[25,28,32,48,62,73,69],\"y\":[140,139,139,132,125,119,120],\"t\":[1650600832248,1650600832488,1650600832502,1650600832519,1650600832535,1650600832552,1650600832664],\"p\":[0.5,0.8221720589961077,0.7145158745241171,0.6257693747105779,0.6043679001585118,0.6460231068820781,0.7185264889882718],\"l\":[0,3.1622776601683795,7.16227766016838,24.626526856741357,40.27900269923988,52.80896678538155,56.93207241099921],\"width\":1.8897637795275593,\"pointerType\":\"mouse\",\"pointerId\":1,\"color\":\"rgba(26,140,255,1)\",\"-myscript-pen-width\":1,\"-myscript-pen-fill-style\":\"none\",\"-myscript-pen-fill-color\":\"#FFFFFF00\"},{\"type\":\"stroke\",\"x\":[46,52,58,61,62],\"y\":[130,137,150,158,161],\"t\":[1650600833280,1650600833368,1650600833385,1650600833401,1650600833418],\"p\":[0.5,0.6963629723289189,0.7260533630682516,0.8060672826037246,0.6831899108492184],\"l\":[0,9.219544457292887,23.53736552056924,32.08136926588677,35.24364692605515],\"width\":1.8897637795275593,\"pointerType\":\"mouse\",\"pointerId\":1,\"color\":\"rgba(26,140,255,1)\",\"-myscript-pen-width\":1,\"-myscript-pen-fill-style\":\"none\",\"-myscript-pen-fill-color\":\"#FFFFFF00\"},{\"type\":\"stroke\",\"x\":[63,67,72,75,78,78,78,75,71,70,68,68,68,71,74,79,82,86,87,89],\"y\":[148,147,147,144,140,135,132,131,134,137,140,144,148,151,151,151,151,145,141,138],\"t\":[1650600833856,1650600833928,1650600833969,1650600833985,1650600834035,1650600834068,1650600834102,1650600834208,1650600834252,1650600834269,1650600834302,1650600834369,1650600834402,1650600834451,1650600834468,1650600834502,1650600834544,1650600834602,1650600834618,1650600834623],\"p\":[0.5,0.796945681513107,0.7436746598382117,0.7222966378316396,0.7436746598382117,0.7436746598382117,0.6761535882018319,0.6831899108492184,0.7436746598382117,0.6831899108492184,0.7007103955941203,0.7145158745241171,0.7145158745241171,0.7222966378316396,0.6761535882018319,0.7436746598382117,0.6761535882018319,0.7880849230110567,0.7185264889882718,0.7007103955941203],\"l\":[0,4.123105625617661,9.123105625617661,13.365746312736945,18.365746312736945,23.365746312736945,26.365746312736945,29.528023972905324,34.52802397290532,37.6903016330737,41.29585290853769,45.29585290853769,49.29585290853769,53.53849359565697,56.53849359565697,61.53849359565697,64.53849359565697,71.74959614658495,75.8727017722026,79.4782530476666],\"width\":1.8897637795275593,\"pointerType\":\"mouse\",\"pointerId\":1,\"color\":\"rgba(26,140,255,1)\",\"-myscript-pen-width\":1,\"-myscript-pen-fill-style\":\"none\",\"-myscript-pen-fill-color\":\"#FFFFFF00\"},{\"type\":\"stroke\",\"x\":[92,89,89,89,92,96,100,100,100,100,97,95,92],\"y\":[124,124,127,131,135,138,139,142,146,150,153,156,157],\"t\":[1650600834784,1650600834880,1650600834919,1650600834952,1650600834969,1650600834985,1650600835019,1650600835135,1650600835152,1650600835169,1650600835186,1650600835201,1650600835286],\"p\":[0.5,0.8267949192431123,0.6761535882018319,0.7145158745241171,0.7436746598382117,0.7436746598382117,0.7185264889882718,0.6761535882018319,0.7145158745241171,0.7145158745241171,0.7222966378316396,0.7007103955941203,0.6831899108492184],\"l\":[0,3,6,10,15,20,24.12310562561766,27.12310562561766,31.12310562561766,35.12310562561766,39.365746312736945,42.97129758820093,46.13357524836931],\"width\":1.8897637795275593,\"pointerType\":\"mouse\",\"pointerId\":1,\"color\":\"rgba(26,140,255,1)\",\"-myscript-pen-width\":1,\"-myscript-pen-fill-style\":\"none\",\"-myscript-pen-fill-color\":\"#FFFFFF00\"},{\"type\":\"stroke\",\"x\":[109,109,109,112,118,123,131,137,146,149,152,153,155],\"y\":[93,99,105,114,127,135,144,151,161,164,163,158,153],\"t\":[1650600835536,1650600835618,1650600835635,1650600835652,1650600835669,1650600835685,1650600835702,1650600835718,1650600835736,1650600835751,1650600835824,1650600835836,1650600835840],\"p\":[0.5,0.7550510257216823,0.7665225987135362,0.8159623787273663,0.6216110326228266,0.8154611476232471,0.6529899918043818,0.8133650328603405,0.6332081782935488,0.7222966378316396,0.6831899108492184,0.7461846839143089,0.7531128489300326],\"l\":[0,6,12,21.486832980505138,35.80465404378149,45.23863517583809,57.28022975463038,66.49977421192327,79.95339825899697,84.19603894611626,87.35831660628465,92.45733611987743,97.84250092701193],\"width\":1.8897637795275593,\"pointerType\":\"mouse\",\"pointerId\":1,\"color\":\"rgba(26,140,255,1)\",\"-myscript-pen-width\":1,\"-myscript-pen-fill-style\":\"none\",\"-myscript-pen-fill-color\":\"#FFFFFF00\"},{\"type\":\"stroke\",\"x\":[116,120,127,143,154],\"y\":[131,130,124,115,111],\"t\":[1650600836176,1650600836269,1650600836285,1650600836302,1650600836303],\"p\":[0.5,0.796945681513107,0.8133650328603405,0.5715427705046183,0.6578786777951477],\"l\":[0,4.123105625617661,13.342650082910549,31.700209833596368,43.404909744315994],\"width\":1.8897637795275593,\"pointerType\":\"mouse\",\"pointerId\":1,\"color\":\"rgba(26,140,255,1)\",\"-myscript-pen-width\":1,\"-myscript-pen-fill-style\":\"none\",\"-myscript-pen-fill-color\":\"#FFFFFF00\"}]}]","574":"[]","331":"[]","654":"[]","550":"[]","517":"[]"}

So How can we show our strokes on PDF view? Also we have generated this PDF using MPDF library on PHP. (https://mpdf.github.io/)

Could you please share some ideas and code about it. We really need it.

Thanks.