javascript - mesureText() returning big number -

in app user can dynamically add either text or image input bar. text inside span element. after images , text added, user can click button add canvas. when adding text canvas use measuretext() texts width can place nicely beside image.

but when use it, returns huge number that's same no matter how big text (303 px). causing this?

if (divel){             ctx.clearrect(0, 0, canvas.width, canvas.height);             ctx.imagesmoothingenabled = false;             for(var n=0; n<imgdiv.children.length; n++){                 if (imgdiv.children[n].nodename === "img"){                     ctx.drawimage(imgdiv.children[n], prevx ,0)                     prevx += imgdiv.children[n].width                     console.log(imgdiv.children[n].width)                 }                 else if(imgdiv.children[n].nodename === "span"){                     ctx.font = window.getcomputedstyle(spanel[0]).fontsize + " open sans"                     ctx.filltext(imgdiv.children[n].innerhtml,prevx ,parseint(window.getcomputedstyle(spanel[0]).fontsize,10))                     prevx += ctx.measuretext(imgdiv.children[n]).width                 }             }             var imagedata = ctx.getimagedata(0,0,canvas.width,canvas.height)             canvas.width = prevx             ctx.putimagedata(imagedata,0,0)         }         console.log(canvas.width)         console.log(canvas.height)         console.log(imagedata)