Drawing In JavaScript / HTML5 Using XOR To Remove Old Sprite

I'm building the engine for a tiny game, and right now I have just got a red circle with two little eyes as a main character. I have keyPress functions to detect movement, and that

Solution 1:

Have you noticed that the un-erased part of your circle is very jaggy?

That's because canvas originally drew your circle with anti-aliasing to visually smooth out the roundness of your circle.

When you XOR the same circle, canvas does not erase the anti-aliasing pixels it originally created.

The same will happen for slanted lines.

Bottom line...XOR will not work until browsers let us turn off anti-aliasing. This option has been proposed to the powers-that-be.

Until then you might change your drawChar so that you can "erase" a slightly larger circle than you originally drew.

drawChar(50,"red");
drawChar(51,"white");

function drawChar(r,fill){
  ctx.beginPath();
  ctx.arc(100,100,r, 0, 2 * Math.PI, false);
  ctx.closePath();
  ctx.fillStyle = fill;
  ctx.fill();
}