Databases
StackOverflow2013
Postsdbo
PO<canvas> restoring problems
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO<canvas> restoring problems
    text
    copied!<p>I tried to use the canvas tag to allow users to draw shapes, but drawing a new line causes all other lines to disappear. <a href="http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic" rel="nofollow">Try It (copy+paste to the textarea and click the "Edit and Click Me >>" button)</a>. I should mention that this problem exists in all 5 most popular browser (including IE7,8 and IE9beta).</p> <p>The code:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;!-- ... --&gt; &lt;!-- (a script used to support canvas in IE7,8) --&gt;&lt;!--[if lte IE 8]&gt; &lt;script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"&gt;&lt;/script&gt; &lt;![endif]--&gt; &lt;script type="text/javascript"&gt;//&lt;![CDATA[ var cnvs, cntxt; window.onload = function () { cnvs = document.getElementById("cnvs"); cntxt = cnvs.getContext("2d"); //... }; 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(); } //]]&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- ... --&gt; &lt;canvas id="cnvs" style="position:absolute;top:0;left:0;border:1px black solid;" onmousedown="beginLine(event.clientX, event.clientY);"&gt;&lt;/canvas&gt; &lt;p style="margin-top:200px;"&gt;(click and drag the mouse to draw a line)&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>It's probably a save/restore mistake, but I can't find it.</p> <hr> <p>I have tried 2 different forums:</p> <ul> <li><a href="http://w3schools.invisionzone.com/index.php?showtopic=34999" rel="nofollow">w3schools</a></li> <li><a href="http://social.msdn.microsoft.com/Forums/en-US/netfxjscript/thread/863927cb-ef90-43d7-9833-8c3d77c53c74" rel="nofollow">MSDN</a></li> </ul> <p>but nobody could tell what the problem is.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload