Jump to content

<canvas>


10 weber

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.

Link to comment
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 comment
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 comment
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 comment
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 comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...