10 weber Posted December 1, 2010 Share Posted December 1, 2010 I tried to use the canvas tag to allow users to draw shapes, but drawing a new line causes all other lines to disappear. <!DOCTYPE html><[color="#0000FF"]html[/color]><[color="#0000FF"]head[/color]> <![color="#FF0000"]-- ... --[/color]> <[color="#0000FF"]script [/color]type="[color="#FFA500"]text/javascript[/color]"> //<![CDATA[ var cnvs, cntxt; window.onload = function () { cnvs = document.getElementById("cnvs"); cntxt = cnvs.getContext("2d"); //... };[b] var lastX, lastY; function beginLine(x, y) { cntxt.moveTo(x, y); cntxt.save(); lastX = x; lastY = y; cnvs.setAttribute("onmousemove", "preview(event.clientX, event.clientY);"); cnvs.setAttribute("onmouseup", "closeLine(event.clientX, event.clientY);"); } function closeLine(x, y) { cntxt.lineTo(x, y); cntxt.stroke(); cntxt.save(); cnvs.removeAttribute("onmousemove"); cnvs.removeAttribute("onmouseup"); } function preview(x, y) { cntxt.beginPath(); cntxt.clearRect(0, 0, cnvs.width, cnvs.height); cntxt.restore(); cntxt.moveTo(lastX, lastY); cntxt.lineTo(x, y); cntxt.stroke(); }[/b] //]]></[color="#0000FF"]script[/color]></[color="#0000FF"]head[/color]><[color="#0000FF"]body[/color]> <![color="#FF0000"]-- ... --[/color]> <[color="#0000FF"]canvas [/color]id="[color="#FFA500"]cnvs[/color]" style="[color="#FFA500"]position:absolute;top:0;left:0;border:1px black solid;[/color]" onmousedown="[color="#FFA500"]beginLine(event.clientX, event.clientY);[/color]"> </[color="#0000FF"]canvas[/color]></[color="#0000FF"]body[/color]></[color="#0000FF"]html[/color]> Tryit EditorIt's probably a save/restore mistake, but I can't find it. Link to comment Share on other sites More sharing options...
10 weber Posted December 3, 2010 Author Share Posted December 3, 2010 someone? please? Link to comment Share on other sites More sharing options...
Synook Posted December 4, 2010 Share Posted December 4, 2010 Well, every time preview() is called, is clears the entire canvas... cntxt.clearRect(0, 0, cnvs.width, cnvs.height); You'll have to find a more specific way of erasing the lines as you go along. Link to comment Share on other sites More sharing options...
10 weber Posted December 4, 2010 Author Share Posted December 4, 2010 Well, every time preview() is called, is clears the entire canvas...cntxt.clearRect(0, 0, cnvs.width, cnvs.height); You'll have to find a more specific way of erasing the lines as you go along. That's what cntxt.restore() (in preview()) should do - draw the saved lines (saved with cntxt.save() in beginLine()). For some reason it doesn't work. Link to comment Share on other sites More sharing options...
thescientist Posted December 4, 2010 Share Posted December 4, 2010 are there any errors when the script runs? Link to comment Share on other sites More sharing options...
thescientist Posted December 4, 2010 Share Posted December 4, 2010 are there any errors when the script runs? Maybe you should run clear after restore? Link to comment Share on other sites More sharing options...
10 weber Posted December 4, 2010 Author Share Posted December 4, 2010 are there any errors when the script runs? Maybe you should run clear after restore?Firefox (using firebug), chrome and opera didn't find any errors.If I run clear after restore it erases the lines that (should) have been restored. Link to comment Share on other sites More sharing options...
Synook Posted December 5, 2010 Share Posted December 5, 2010 Oh I see... save() and restore() push and pop states from a stack, so for every save, only one restore can be done that pops that saved state and draws it on the canvas. However if you call restore() multiple times you'll pop states from earlier and earlier on until you reach the beginning, an empty canvas. Link to comment Share on other sites More sharing options...
10 weber Posted December 5, 2010 Author Share Posted December 5, 2010 Oh I see... save() and restore() push and pop states from a stack, so for every save, only one restore can be done that pops that saved state and draws it on the canvas. However if you call restore() multiple times you'll pop states from earlier and earlier on until you reach the beginning, an empty canvas.I tried to change preview() tofunction preview(x, y) { cntxt.beginPath(); cntxt.clearRect(0, 0, cnvs.width, cnvs.height); cntxt.restore(); cntxt.save(); cntxt.moveTo(lastX, lastY); cntxt.lineTo(x, y); cntxt.stroke();} but it still doesn't work. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.