Есть идеи, как сделать так, чтобы рисунок на холсте не накладывался на другой?

три способа (как минимум):

• вы можете обрезать холст: будет нарисована только необрезанная часть.

чтобы обрезать, вы создаете путь с помощью beginPath, moveTo, lineTo, arcTo, ... arc (любая функция построения пути), тогда вы вызываете clip (): часть внутри пути является обрезанной частью.

не забудьте сохранить контекст до и восстановить его после (если вам не нужен постоянный клип).

фрагмент:

http://jsbin.com/oSoSugAZ/1/

 var context=document.getElementById('cv').getContext('2d');

 context.fillStyle='#F66';
 context.fillRect(150,150, 500,500); // draw big rect in red 

 context.save();
 context.lineWidth=0; // to have precise clip
 context.beginPath();
 context.moveTo(100,100);
 context.lineTo(200,100);
 context.lineTo(200,200);
 context.lineTo(100,200);
 context.closePath();
 context.clip();
 // here we can only draw within the rect (100,100) (200,200)
 context.fillStyle='#FCE'; // pink
 context.fillRect(150,150, 500,500); // will get clipped
 context.beginPath();
 context.fillStyle = '#AAF';
 context.arc(150,150, 30, 0,6.2);
 context.fill();    // won't get clipped

 // do not forget to restore !
 context.restore();

• вы можете использовать globalCompositeOperation, чтобы выбрать способ взаимодействия рисованного пикселя с существующими. Он работает как для контуров рисования, так и для изображений. Здесь слишком много вариантов, чтобы обсуждать их, все зависит от ваших потребностей.

полный пример здесь:

https://developer.mozilla.org/samples/canvas-tutorial/6

 var context=document.getElementById('cv').getContext('2d');

 context.fillStyle='#F66';
 context.fillRect(150,150, 500,500); // draw big rect in red 

 context.save();
 context.lineWidth=0; // to have precise clip
 context.beginPath();
 context.moveTo(100,100);
 context.lineTo(200,100);
 context.lineTo(200,200);
 context.lineTo(100,200);
 context.closePath();
 context.clip();
 // here we can only draw within the rect (100,100) (200,200)
 context.fillStyle='#FCE'; // pink
 context.fillRect(150,150, 500,500); // will get clipped
 context.beginPath();
 context.fillStyle = '#AAF';
 context.arc(150,150, 30, 0,6.2);
 context.fill();    // won't get clipped

 // do not forget to restore !
 context.restore();

Обратите внимание, что темнее не работает (но в любом случае это бесполезно, просто используйте normal mode = source-over с низкой непрозрачностью (0,2) и fillRect черным).

• Другой вариант - использовать временный холст для рисования. Это очень просто, особенно если вы делаете небольшие вспомогательные функции.

  функция createCanvas (w, h) {
  var cv = document.createElement ('canvas');
  cv.width; cv.height = height;
  return cv;
  }

(в любом случае, вам интересно, вы можете взглянуть на мою небольшую библиотеку, чтобы упростить работу с холстом: https://github.com/gamealchemist/CanvasLib/blob/master/canvasLib.js)

Вы не можете. Но вы можете моделировать слои с несколькими элементами холста с разными z-индексами.

РЕДАКТИРОВАТЬ:

Проверьте это: слои холста