Erasing previously drawn lines on an HTML5 canvas

Question

To play around with HTML5 canvas, I decided to make an app which draws an analogue clockface. Everything\'s fine, except that old lines don\'t get erased in the way that I w

Answer 1

My solution is double buffering :

var shapes = 
  [{type:"circle", x:50, y:50, radious:40, lineWidth:2, strokeStyle:"#FF0000", fillStyle:"#800000"}
  ,{type:"rectangle", x:50, y:50, width:100, height: 100, lineWidth:2, strokeStyle:"#00FF00", fillStyle:"#008000"}
  ,{type:"line", x1:75, y1:100, x2:170, y2:75, lineWidth:3, strokeStyle:"#0000FF"}
  ];

step1();
setTimeout(function () {
  step2();
  setTimeout(function () {
    step3();
  }, 1000);
}, 1000);

function step1() {
  clearCanvas('myCanvas1');
  shapes.forEach((sh) => { drawShape('myCanvas1', sh); });
};

function step2() {
  clearCanvas('myCanvas2');
  shapes.pop();
  shapes.forEach((sh) => { drawShape('myCanvas2', sh); });
  showOtherCanvas('myCanvas2', 'myCanvas1');
};

function step3() {
  clearCanvas('myCanvas1');
  shapes.pop();
  shapes.forEach((sh) => { drawShape('myCanvas1', sh); });
  showOtherCanvas('myCanvas1', 'myCanvas2');
};

function showOtherCanvas(cnv1, cnv2) {
  var c1 = document.getElementById(cnv1);
  var c2 = document.getElementById(cnv2);
  
  c1.style['z-index'] = 3;
  c2.style['z-index'] = 1;
  c1.style['z-index'] = 2;
}

function clearCanvas(canvasID) {
  var canvas = document.getElementById(canvasID);
  var ctx = canvas.getContext('2d');
  
  ctx.fillStyle="#FFFFFF";
  ctx.fillRect(0,0,480,320);
} 

function drawShape (canvasID, info) {
  switch (info.type) {
    case "line"      : drawLine(canvasID, info);
    case "rectangle" : drawRectangle(canvasID, info);
    case "circle"    : drawCircle(canvasID, info);
  }
}

function drawLine (canvasID, info) {
  var canvas = document.getElementById(canvasID);
  var ctx = canvas.getContext('2d');
  
  ctx.strokeStyle = info.strokeStyle;
  ctx.lineWidth = info.lineWidth

  ctx.beginPath();
  ctx.moveTo(info.x1, info.y1);
  ctx.lineTo(info.x2, info.y2);
  ctx.stroke();
}

function drawRectangle (canvasID, info) {
  var canvas = document.getElementById(canvasID);
  var ctx = canvas.getContext('2d');
  
  ctx.fillStyle = info.fillStyle;
  ctx.strokeStyle = info.strokeStyle;
  ctx.lineWidth = info.lineWidth

  ctx.fillRect(info.x, info.y, info.width, info.height);
  ctx.strokeRect(info.x, info.y, info.width, info.height);
}

function drawCircle (canvasID, info) {
  var canvas = document.getElementById(canvasID);
  var ctx = canvas.getContext('2d');
  
  ctx.fillStyle = info.fillStyle;
  ctx.strokeStyle = info.strokeStyle;
  ctx.lineWidth = info.lineWidth

  ctx.beginPath();
  ctx.arc(info.x, info.y, info.radious, 0, 2 * Math.PI);
  ctx.fill();

  ctx.beginPath();
  ctx.arc(info.x, info.y, info.radious, 0, 2 * Math.PI);
  ctx.stroke();
}

The change is so fast you won't see any flicker.