title: Using Canvas layers to draw shapes on top of one another
body: <p>I'm trying to create an interactive app to enable users to select the shape they want by clicking on the different buttons for the shapes and then enable them to draw the shape wherever they will click on the canvas.
  This part is okay but when i click on a different button to draw a shape it seems that the previous shape comes along with the new shape and seems to be overlapped.
  Here's the pic:
  <img src="https://i.stack.imgur.com/sC4QX.png" alt="enter image description here">
  <br/>As you see, the rectangle and the round shape becomes overlapped.
  I've tried to use layers of canvas to fix it but now the rectangle button is not working and the rounded shape is not appearing where the user clicks, rather like 30px away from it.</p>
  
  <p>Here's the codes:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;script&gt;
  
   function initiateCanvasRectangle()
   {
       var ctx = document.getElementById('myCanvas1').getContext('2d');
       ctx.canvas.addEventListener('mousemove', function(event) {
           var mouseX = event.clientX - ctx.canvas.offsetLeft;
           var mouseY = event.clientY - ctx.canvas.offsetTop;
       });
  
       ctx.canvas.addEventListener('click', function(event) {
           var mouseX = event.clientX - ctx.canvas.offsetLeft;
           var mouseY = event.clientY - ctx.canvas.offsetTop;
  
           ctx.fillRect(mouseX,mouseY,100,50);
           ctx.fillStyle = "purple";
      });
  
   }
  
   function initiateCanvasCircle()
   {
       var ctx = document.getElementById('myCanvas2').getContext('2d');
       ctx.canvas.addEventListener('mousemove', function(event) {
           var mouseX = event.clientX - ctx.canvas.offsetLeft;
           var mouseY = event.clientY - ctx.canvas.offsetTop;
       });
  
       ctx.canvas.addEventListener('click', function(event) {
           var mouseX = event.clientX - ctx.canvas.offsetLeft;
           var mouseY = event.clientY - ctx.canvas.offsetTop;
  
           ctx.beginPath();
           ctx.arc(mouseX, mouseY, 30, 0, 2 * Math.PI, false);
           ctx.fillStyle = 'pink';
           ctx.fill();
      });
  
   }
  
   function rect(){
   window.addEventListener('click', function(event) {
       initiateCanvasRectangle();
   });
   }
  
   function drawRect()
   {
       rect();
   }
  
   function circle(){
    window.addEventListener('click', function(event) {
       initiateCanvasCircle();
   });
   }
  
   function drawCircle()
   {
      circle();
   }
  
   &lt;/script&gt;
  
   &lt;style&gt;
   BUTTON.rect {
       padding: 8px 8px 8px 32px;
       font-family: Arial, Verdana;   
       background-color: white;
       border:2px solid black;
   }
  
   #tbl {
       border-collapse:collapse;
   }
  
   &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;table border="1" id="tbl"&gt;
  &lt;tr&gt;&lt;td&gt;&lt;button class="circle" onclick="drawCircle(); return true;" style="padding:20px 40px 20px 40px;"&gt;Circle&lt;/button&gt;
  &lt;/td&gt;
  &lt;td&gt;
  &lt;button class="rect" onclick="drawRect(); return true;" style="padding:20px 40px 20px 40px;"&gt;&lt;/button&gt;
  &lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  &lt;p&gt;
  &lt;div style="position: relative;"&gt;
  &lt;canvas id="myCanvas1" width="1100" height="400"  style="position: absolute; left: 0; top: 0; z-index: 0; border:1px solid black"&gt;&lt;/canvas&gt;
  &lt;canvas id="myCanvas2" width="1100" height="400"  style="position: absolute; left: 0; top: 0; z-index: 1;"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Can you tell me how to fix it? Any help will be much appreciated. Thanks.</p>