HTML5 Canvas: Drawing a single line causes visual bug -

i'm working on map editor/ line of sight calculator online game using "infinite" canvas user can scroll. goal draw line player's position (currently static) cursor position. far, can draw line fine, when scroll canvas far enough, pretty bad visual bug. appears if draw() function no longer clearing screen correctly. can confirm line culprit removing block of code.

my (stripped down) drawline() function:

function drawline() {     context.beginpath();     context.moveto(150, 300);     context.lineto(mouse.x, -mouse.y);     context.linewidth = 1;     context.stroke();     context.closepath(); } 

my draw() function (variable grid repeating pattern):

function draw() {     context.clearrect(-translatedx, -translatedy, window.innerwidth, window.innerheight);     context.rect(-window.innerwidth, -window.innerheight, window.innerwidth * 2, window.innerheight * 2);     context.fillstyle = grid;     context.fill(); } 

and pan() function triggers onmouseove:

function pan(e) {     var evt = e || event;      if(dragging == true) {         deltax = evt.offsetx - lastx;         deltay = evt.offsety - lasty;         translatedx += deltax;         translatedy += deltay;         context.translate(deltax, -deltay);         lastx = evt.offsetx;         lasty = evt.offsety;     }      mouse = {         x: evt.offsetx - (window.innerwidth / 2 + translatedx),         y: evt.offsety - (window.innerheight / 2 + translatedy)     }      draw(); } 

if more information required, happy supply.

edit: updated screenshot , link:

http://iamchristopher.ca/editor/

i've been working away @ problem , think i've found solution. still don't know why line causing issue, answer modify context.rect() include translated coordinates:

context.rect(-window.innerwidth - translatedx, -window.innerheight + translatedy, window.innerwidth * 2, window.innerheight * 2); 

everything seems working fine now. again @patashu.