Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder donna1's Avatar
    Join Date
    Nov 2012
    Location
    london
    Posts
    99
    Thanks
    9
    Thanked 4 Times in 4 Posts

    Why does this not quite work as expected?

    This code is supposed to draw a faint line in green as I move round and then confirm it in black when I click mouse.
    It nearly works but it does NOT fully erase green line when moving around.
    Really can't understand why not?
    Please anybody see whats wrong?
    Code:
    <!DOCTYPE HTML>
    <html>
      <body>
        <canvas id="myCanvas" width="600" height="600"></canvas>
        <script>
        
        var startx=100,starty=100,xnow=1,ynow=1;
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
    	  
    function doMove(){
      context.strokeStyle="white"; // clear previous line
      context.beginPath();
      context.moveTo(startx,starty);
      context.lineTo(xnow,ynow);
      context.stroke();
      xnow=event.pageX;
      ynow=event.pageY;
    
      context.strokeStyle="green"; // new tempory line in green
      context.beginPath();
      context.moveTo(startx,starty);
      context.lineTo(xnow,ynow);
      context.stroke();
     }
    
    function doDown(){
      context.strokeStyle="black"; // Make line permanent Black
      context.beginPath();
      context.moveTo(startx,starty);
      context.lineTo(xnow,ynow);
      context.stroke();
      startx=xnow;
      starty=ynow;
     }
    canvas.addEventListener("mousedown", doDown, false);
    canvas.addEventListener("mousemove", doMove, false);
    
        </script>
      </body>
    </html>

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by donna1 View Post
    This code is supposed to draw a faint line in green as I move round and then confirm it in black when I click mouse.
    It nearly works but it does NOT fully erase green line when moving around.
    Really can't understand why not?
    Please anybody see whats wrong?
    You have an error. The mousemove event argument was never assigned a name; doMove() should be doMove(event).

    Beyond that, I don't see an issue in your code's logic. It probably has something to do with the way canvases are drawn. Maybe the color white aliases differently than the color green, which seems even more likely given that the color white is being drawn onto a different surface (a green surface).

    It's probably a moot point anyway. Even if your code worked, after you start "confirming" lines, your preview lines will overwrite the confirmed lines when a preview line overlaps them, effectively destroying whatever you're trying to draw.

    I would either create this in SVG or, if you insist on using canvas, then I would create a second, preview canvas over a first, primary canvas. Each time a preview line is drawn, first erase the preview canvas instead of trying to overwrite the old preview line. On confirming the line, draw the line to the primary canvas instead; this ensures that the confirmed lines aren't overwritten.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    donna1 (11-04-2013)

  • #3
    New Coder donna1's Avatar
    Join Date
    Nov 2012
    Location
    london
    Posts
    99
    Thanks
    9
    Thanked 4 Times in 4 Posts
    Thanks you are right about it erasing the confirmed lines anyway.
    1) That 'event' argument. Normally arguments can be any word but I noticed all scripts use 'event' as the argument - even when it is not defined. Is that like a fixed word??
    2) What is SVG?
    Last edited by donna1; 11-04-2013 at 08:26 PM.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by donna1 View Post
    1) That 'event' argument. Normally arguments can be any word but I noticed all scripts use 'event' as the argument - even when it is not defined. Is that like a fixed word??
    No, you can change the argument/parameter name to whatever you want. event is just a convention. Whenever you use addEventListener with a function name only, the event object is automatically passed as an argument and assigned to the first parameter. In your code, you don't have any parameters specified and, therefore, didn't assign the event argument a name, yet your code erroneously uses it as event anyway.

    Quote Originally Posted by donna1 View Post
    2) What is SVG?
    Scalable Vector Graphics. It's a markup-based vector graphics format that can be manipulated as nodes through JavaScript. Your preview line could be a single line element that you manipulate instead of pixels permanently rasterized to a render surface like with canvas.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    New Coder donna1's Avatar
    Join Date
    Nov 2012
    Location
    london
    Posts
    99
    Thanks
    9
    Thanked 4 Times in 4 Posts

    event?

    That is one of the things that confused me, how come the event X and Y coordinates work even though I didn't specifiy 'event' as my argument?
    Thats why I asked is event defined as a default/special word?
    Its like I never defined event as an object or variable, nor used it in any call, but it still knows what I mean by event.pageX

    If I use another variable, say eventy.pageX it doesn't know what I mean, so event must be defined somewhere as the 'default' word.
    I'm puzzled by this
    Last edited by donna1; 11-05-2013 at 08:25 AM.

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by donna1 View Post
    That is one of the things that confused me, how come the event X and Y coordinates work even though I didn't specifiy 'event' as my argument?
    Thats why I asked is event defined as a default/special word?
    Its like I never defined event as an object or variable, nor used it in any call, but it still knows what I mean by event.pageX

    If I use another variable, say eventy.pageX it doesn't know what I mean, so event must be defined somewhere as the 'default' word.
    I'm puzzled by this
    You're probably using Chrome or Internet Explorer to test. Your code didn't work in Firefox.

    The old, proprietary Microsoft event model has an event property on the window object that automatically gets populated when an event occurs. As you may already know, the window object can be used implicitly, which means that event can (and does in Chrome and IE) refer to window.event unless overwritten.

    Demo:
    Code:
    <!doctype html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>Demo</title>
    	</head>
    	<body>
    		<p>Below, you should see either an error message or confirmation that an <code>event</code> object exists.</p>
    		<script>
    			function test() {
    				var paragraph = document.createElement("p");
    				try {
    					paragraph.textContent = event;
    				}
    				catch (errorObject) {
    					paragraph.textContent = errorObject.message;
    				}
    				document.body.appendChild(paragraph);
    			}
    			document.addEventListener("DOMContentLoaded", test);
    		</script>
    	</body>
    </html>
    You'll get an error message in Firefox 25 and an event object type-converted to a string in Chrome 30 and IE11. You shouldn't rely on this behavior and should instead declare the event parameter explicitly:

    Code:
    <!doctype html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>Demo</title>
    	</head>
    	<body>
    		<p>Below, you should see either an error message or confirmation that an <code>event</code> object exists.</p>
    		<script>
    			function test(event) {
    				var paragraph = document.createElement("p");
    				try {
    					paragraph.textContent = event;
    				}
    				catch (errorObject) {
    					paragraph.textContent = errorObject.message;
    				}
    				document.body.appendChild(paragraph);
    			}
    			document.addEventListener("DOMContentLoaded", test);
    		</script>
    	</body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    donna1 (11-05-2013)

  • #7
    New Coder donna1's Avatar
    Join Date
    Nov 2012
    Location
    london
    Posts
    99
    Thanks
    9
    Thanked 4 Times in 4 Posts
    Thats very useful, thanks.
    Last question, If I dont want my temporary line to rub out previous permanent lines whats the best way to do that?
    Can you have like a two layer canvas, where permanent lines go on the bottom one, and above it is a see through one where the faint line can be drawn as it moves around?

    Also I have made some progress with the first question of why the temp line doesn't erase properly. I tried really simple code of drawing a line and drawing over some it in white AND IT ONLY HALF RUBS OUT on that part! so I think its some kind of rounding error with how the algorithm picks the pixels to make the line. The following example draws a diagonal line and tries to rub-out some of it, but dots are left over!! If the erase drawn is Width=3 then it does erase completely!

    Code:
    <!DOCTYPE HTML>
    <html>
      <body>
        <canvas id="myCanvas" width="600" height="600"></canvas>
        <script>
        
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
    	  
    
      context.strokeStyle="blue";
      context.lineWidth=1;
      context.beginPath();
      context.moveTo(10,10);
      context.lineTo(300,300);
      context.stroke();
    
      context.strokeStyle="white"; // erase part of line;
      context.beginPath();
      context.moveTo(10,10);
      context.lineTo(200,200);
      context.stroke();
    
        </script>
      </body>
    </html>
    Last edited by donna1; 11-05-2013 at 10:55 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •