var canvas = document.getElementById('dessin');
var context1 = canvas.getContext('2d');
var context2 = canvas.getContext('2d');

context1.beginPath();
context1.arc(100, 100, 50, 0, 2 * Math.PI);
context1.fill();
context1.closePath();

context2.beginPath();
context2.fillStyle = 'red';
context2.arc(200, 200, 50, 0, 2 * Math.PI);
context2.fill();
context2.closePath();


document.getElementById('clearCanvas1').onclick = function(){
   context1.clearRect(0,0,canvas.width, canvas.height);
};

var canvas = document.getElementById("design");
var context = canvas.getContext('2d');

context.beginPath();
context.arc(100, 100, 50, 0, 2 * Math.PI);
context.fill();
context.closePath();

context.beginPath();
context.fillStyle = 'red';
context.arc(200, 200, 50, 0, 2 * Math.PI);
context.fill();
context.closePath();

context.clearRect(50, 50, 100, 100);

<style>
    .canvasHolder{
        position: relative;
        height: 500px; width: 500px; //based on your canvas size
    }
    .canvas{
        position: absolute;
        top: 0; left: 0;
    }
</style>

<div class="canvasHolder">
    <canvas class="canvas" id="dessin1" width="500" height="500"> ... </canvas>
    <canvas class="canvas" id="dessin2" width="500" height="500"> ... </canvas>
</div>

<button id="clearCanvas1"> Clear canvas1 (black circle) </button>

var canvas1 = document.getElementById('dessin1');
var context1 = canvas1.getContext('2d');

var canvas2 = document.getElementById('dessin2');
var context2 = canvas2.getContext('2d');

context1.beginPath();
context1.arc(100, 100, 50, 0, 2 * Math.PI);
context1.fill();
context1.closePath();

context2.beginPath();
context2.fillStyle = 'red';
context2.arc(200, 200, 50, 0, 2 * Math.PI);
context2.fill();
context2.closePath();


document.getElementById('clearCanvas1').onclick = function(){
    context1.clearRect(0,0,canvas.width, canvas.height);
};