1

I'm trying to simulate a medical waveform where it draws some lines across the screen then when it gets to the end, it wipes the screen in front of new lines being drawn (a 50pixel wide area). I actually have two issues.

  1. After the first lines make it to the end, I start using clearRect() on my canvas to clear a 50 pixel wide area and move that rect one pixel at a time across the screen. Looks great, but even though the coordinates look right in the debugger, the rect is going across the screen twice as fast as it should.

  2. More importantly, the lines beind drawn after my clearRect() are blotchy. Its the same exact code.

I'm using one canvas for the grid lines in the back and another to animate the wavelines.

The first thing in my animate() method is:

waveContext.beginPath();
waveContext.clearRect(CurrentXPosition, 0, CurrentXPosition + 50, CanvasHeight);
waveContext.stroke();

Then to draw my waveLines, I move across by one pixel at a time using requestAnimFrame() that I found on here doing this:

waveContext.lineWidth = 2.5;
waveContext.strokeStyle = waveColor;
waveContext.beginPath();
waveContext.moveTo(oldx, oldy);
waveContext.lineTo(newx, newy);
waveContext.stroke();

That's about it. Any ideas why the lines would be like this after calling clearRect()? It does it in IE, Chrome and Firefox.

Thanks!

1
  • 2
    Could you provide more code and also picture of the issue ( a fiddle would be great ) Jun 16, 2014 at 15:01

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.