Jump to content

Recommended Posts

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.

Edited by 10 weber
Link to post
Share on other sites

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 post
Share on other sites
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 post
Share on other sites
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. Edited by 10 weber
Link to post
Share on other sites

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 post
Share on other sites
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() to
function 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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...