Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML5 Canvas (Drawing (Rectangle) Keeps Disappearing)
    primarykey
    data
    text
    <p>how's it going? </p> <p>Recently, with the help given from this site, I've learned how to draw a rectangle on an HTML5 canvas at the click of the button... that's not the problem:) The is problem this... unfortunately, every time I click on the canvas to make a new rectangle, the old rectangle disappears (or is instantly erased). It also didn't work at all when I tried to use it on my iPod... why:(?</p> <hr> <p>Here's my code: </p> <hr> <p>JAVASCRIPT: </p> <pre><code> // "Rectangle" Button function rect() { var canvas = document.getElementById('canvasSignature'), ctx = canvas.getContext('2d'), rect = {}, drag = false; function init() { canvas.addEventListener('mousedown', mouseDown, false); canvas.addEventListener('mouseup', mouseUp, false); canvas.addEventListener('mousemove', mouseMove, false); } function mouseDown(e) { rect.startX = e.pageX - this.offsetLeft; rect.startY = e.pageY - this.offsetTop; drag = true; } function mouseUp() { drag = false; } function mouseMove(e) { if (drag) { rect.w = (e.pageX - this.offsetLeft) - rect.startX; rect.h = (e.pageY - this.offsetTop) - rect.startY ; ctx.clearRect(0,0,canvas.width,canvas.height); draw(); } } function draw() { ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h); } init(); } </code></pre> <hr> <p>HTML5:</p> <pre><code>&lt;div id="canvasDiv"&gt; &lt;canvas id="canvasSignature" width="580px" height="788px" style="border:2px solid #000; background: #FFF;"&gt;&lt;/canvas&gt; &lt;/div&gt; &lt;div id="rect"&gt; &lt;p&gt;&lt;button onclick="rect();"&gt;Rectangle&lt;/button&gt;&lt;/p&gt; &lt;/div&gt; </code></pre> <hr> <p>Any help at all would be greatly appreciated:) </p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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