Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by PDXPat

  1. 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
  • Create New...