javascript - Canvas disappearing -
i've written simple script in js. when put hit html document (at bottom of body tag), works fine. when try put external document , link it, script runs canvas element disappears (just checked: works when put script in bottom, not in head tag). version works:
var c = document.getelementbyid("canvasid"); var ctx = c.getcontext("2d"); var text = "nazwa pomiaru"; var boxwidth = 200; var boxheight = 200; var minvalue = 0; var maxvalue = 100; var midvalue = (math.abs(minvalue) + math.abs(maxvalue))/2; var unit = "%"; var indicwidth = 50; var indicheight = 0.6 * boxheight; var textposition = 0.875; var leftmargin = 0.375; var topmargin = 0.15; var bottommargin = 0.75; var value = math.floor(math.random() * 101); var warningtop = 90; var dangertop = 95; var warningbottom = 10; var dangerbottom = 5; var thresholdtrasparency = 0.6; var strokecolor = "#cccccc"; var valuecolor = "#993333"; var warningcolor = "#ff6600"; var dangercolor = "#cc0000"; var textcolor = "#000000"; var textcolor2 = "#ffffff"; ctx.beginpath(); ctx.filltext((maxvalue + unit), (leftmargin * boxwidth - ctx.measuretext(maxvalue + unit).width-1), (topmargin * boxheight + 3), (boxwidth / 4)); //draw maxvalue ctx.filltext((midvalue + unit), (leftmargin * boxwidth - ctx.measuretext(midvalue + unit).width-1), ((topmargin + bottommargin) / 2 * boxheight + 3), (boxwidth / 4)); //draw midvalue ctx.filltext((minvalue + unit), (leftmargin * boxwidth - ctx.measuretext(minvalue + unit).width-1), (bottommargin * boxheight + 3), (boxwidth / 4)); //draw minvalue ctx.filltext(text, ((boxwidth - ctx.measuretext(text).width) / 2), (textposition * boxheight), (textposition * boxwidth)); //type text ctx.linewidth = "0"; ctx.globalalpha = thresholdtrasparency; if (warningtop !== 0 || warningbottom !== 0) { ctx.fillstyle = warningcolor; ctx.fillrect((leftmargin * boxwidth), (topmargin * boxheight), indicwidth, ((100 - warningtop) * (indicheight / 100))); //draw warningtop ctx.fillrect((leftmargin * boxwidth), (topmargin * boxheight + (100 - warningbottom) * (indicheight / 100)), indicwidth, (indicheight - (100 - warningbottom) * (indicheight / 100))); //draw warningbottom } if (dangertop !== 0 || dangerbottom !== 0) { ctx.fillstyle = dangercolor; ctx.fillrect((leftmargin * boxwidth), (topmargin * boxheight), indicwidth, ((100 - dangertop) * (indicheight / 100))); //draw dangertop ctx.fillrect((leftmargin * boxwidth), (topmargin * boxheight + (100 - dangerbottom) * (indicheight / 100)), indicwidth, (indicheight - (100 - dangerbottom) * (indicheight / 100))); //draw dangerbottom } ctx.beginpath(); ctx.globalalpha = 1; ctx.fillstyle = valuecolor; ctx.fillrect((leftmargin * boxwidth), (topmargin * boxheight + (100 - value) * (indicheight / 100)), indicwidth, (indicheight - (100 - value) * (indicheight / 100))); //draw valueindicator if (value <= 47) { ctx.fillstyle= textcolor; } else { ctx.fillstyle = textcolor2; } ctx.filltext(value, ((boxwidth - ctx.measuretext(value).width) / 2), (boxheight / 2)); ctx.shadowblur = 6; ctx.shadowcolor = "#000000"; ctx.linewidth="2"; ctx.strokestyle = strokecolor; ctx.strokerect((leftmargin * boxwidth), (topmargin * boxheight), indicwidth, indicheight); //draw rectangle ctx.shadowblur = 0; document.write(value); <!doctype html> <html> <head> <title>slider</title> </head> <body> <canvas id="canvasid" style="border: 3px solid; background: #ffffff;" width="200px" height="200px"> no support. </canvas> <script src="canvas.js"></script> </body> </html>this version not work:
function draw () { var c = document.getelementbyid("canvasid"); var ctx = c.getcontext("2d"); var text = "nazwa pomiaru"; var boxwidth = 200; var boxheight = 200; var minvalue = 0; var maxvalue = 100; var midvalue = (math.abs(minvalue) + math.abs(maxvalue))/2; var unit = "%"; var indicwidth = 50; var indicheight = 0.6 * boxheight; var textposition = 0.875; var leftmargin = 0.375; var topmargin = 0.15; var bottommargin = 0.75; var value = math.floor(math.random() * 101); var warningtop = 90; var dangertop = 95; var warningbottom = 10; var dangerbottom = 5; var thresholdtrasparency = 0.6; var strokecolor = "#cccccc"; var valuecolor = "#993333"; var warningcolor = "#ff6600"; var dangercolor = "#cc0000"; var textcolor = "#000000"; var textcolor2 = "#ffffff"; ctx.beginpath(); ctx.filltext((maxvalue + unit), (leftmargin * boxwidth - ctx.measuretext(maxvalue + unit).width-1), (topmargin * boxheight + 3), (boxwidth / 4)); //draw maxvalue ctx.filltext((midvalue + unit), (leftmargin * boxwidth - ctx.measuretext(midvalue + unit).width-1), ((topmargin + bottommargin) / 2 * boxheight + 3), (boxwidth / 4)); //draw midvalue ctx.filltext((minvalue + unit), (leftmargin * boxwidth - ctx.measuretext(minvalue + unit).width-1), (bottommargin * boxheight + 3), (boxwidth / 4)); //draw minvalue ctx.filltext(text, ((boxwidth - ctx.measuretext(text).width) / 2), (textposition * boxheight), (textposition * boxwidth)); //type text ctx.linewidth = "0"; ctx.globalalpha = thresholdtrasparency; if (warningtop !== 0 || warningbottom !== 0) { ctx.fillstyle = warningcolor; ctx.fillrect((leftmargin * boxwidth), (topmargin * boxheight), indicwidth, ((100 - warningtop) * (indicheight / 100))); //draw warningtop ctx.fillrect((leftmargin * boxwidth), (topmargin * boxheight + (100 - warningbottom) * (indicheight / 100)), indicwidth, (indicheight - (100 - warningbottom) * (indicheight / 100))); //draw warningbottom } if (dangertop !== 0 || dangerbottom !== 0) { ctx.fillstyle = dangercolor; ctx.fillrect((leftmargin * boxwidth), (topmargin * boxheight), indicwidth, ((100 - dangertop) * (indicheight / 100))); //draw dangertop ctx.fillrect((leftmargin * boxwidth), (topmargin * boxheight + (100 - dangerbottom) * (indicheight / 100)), indicwidth, (indicheight - (100 - dangerbottom) * (indicheight / 100))); //draw dangerbottom } ctx.beginpath(); ctx.globalalpha = 1; ctx.fillstyle = valuecolor; ctx.fillrect((leftmargin * boxwidth), (topmargin * boxheight + (100 - value) * (indicheight / 100)), indicwidth, (indicheight - (100 - value) * (indicheight / 100))); //draw valueindicator if (value <= 47) { ctx.fillstyle= textcolor; } else { ctx.fillstyle = textcolor2; } ctx.filltext(value, ((boxwidth - ctx.measuretext(value).width) / 2), (boxheight / 2)); ctx.shadowblur = 6; ctx.shadowcolor = "#000000"; ctx.linewidth="2"; ctx.strokestyle = strokecolor; ctx.strokerect((leftmargin * boxwidth), (topmargin * boxheight), indicwidth, indicheight); //draw rectangle ctx.shadowblur = 0; document.write(value); }; window.onload = draw;<!doctype html> <html> <head> <title>slider</title> </head> <body> <canvas id="canvasid" style="border: 3px solid; background: #ffffff;" width="200px" height="200px"> no support. </canvas> <script src="canvas.js"></script> </body> </html>the second version someway hides canvas tag text appears (so script works).
is there solution this?
the reason why canvas (and entire document, matter) disappears because using document.write. in first snippet, you're writing document before closes stream. in case of second snippet, you're executing code after window.onload, @ point document stream closed.
note: document.write writes document stream, calling document.write on closed (loaded) document automatically calls document.open clear document. - https://developer.mozilla.org/en-us/docs/web/api/document/write
the solution(s) be:
1) don't use document.write - if need write document, place html element on page, write element:
// html: <html> ... <body> <p id="output"></p> </body> </html> // javascript // ... var el = document.getdocumentbyid('output'); el.textcontent = value 2) don't call document.write after page has loaded (as in first snippet)
personally, never use document.write, might run issues such describe.
Comments
Post a Comment