Jump to content
PDXPat

Question - screen artifacts when drawing over lines

Recommended Posts

Hello. I have a question about drawing lines using javascript and HTML5. The code below calls a function that draws two lines with the same coordinates. The first line is drawn in black, the second in white. The intention is that the second line will erase the first line. The results that I see in Chrome a subtle Gray line. A ghost line or a line with screen artifacts. I was wondering if the community might be aware of an attribute that I am failing to set that will remove this problem. Thanks! PDXPat <html> <head></head> <body onLoad="draw();"> <canvas id="canvas" width="640" height="480"></canvas> <p id="debug"/> <script type="application/javascript"> var DEBUG = false; var line_left = 0;var line_right = 640;var line_top = 0;var line_bottom = 480; var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d'); var WIDTH=640, HEIGHT=480; function drawline( l, t, r, b, color ){debug(l);debug(t);debugĀ®;debug(B); ctx.lineWidth=1;ctx.strokeStyle = color;ctx.beginPath();ctx.moveTo(l, t);ctx.lineTo(r, B);ctx.stroke(); } function draw(){drawline( line_left, line_top, line_right, line_bottom, "#000000" ); drawline( line_left, line_top, line_right, line_bottom, "#ffffff" );} function debug(text){if(DEBUG)document.getElementById("debug").innerHTML = document.getElementById("debug").innerHTML + "<br>" + text;} </script> </body> </html>

GhostLine.html

Share this post


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...