PDXPat Posted March 6, 2012 Share Posted March 6, 2012 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(; ctx.lineWidth=1;ctx.strokeStyle = color;ctx.beginPath();ctx.moveTo(l, t);ctx.lineTo(r, ;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 Link to comment Share on other sites More sharing options...
justsomeguy Posted March 6, 2012 Share Posted March 6, 2012 Check here: http://stackoverflow.com/questions/195262/can-i-turn-off-antialiasing-on-an-html-canvas-element Link to comment Share on other sites More sharing options...
PDXPat Posted March 7, 2012 Author Share Posted March 7, 2012 Thanks Old Man from Scene! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.