Clear a specific context of a canvas

Question

I'm working on a project with HTML canvas and I'm in trouble with a few things.

I want to be able to clear a specific context of my canvas without altering others. Here is an example :

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);
};

https://jsfiddle.net/amwnhx0m/

I've got 2 contexts on the same canvas : context1 which draws a black circle and context2 which draws a red circle.

When I put a clearRect on context1 it is appended on the whole canvas so the context2 disappears. I wonder if it's possible to keep context2 without redrawing after the clearRect (performance issue)

Answer 1

1. Single Canvas

As Blindman67 mentioned in his comment, the standard says that a canvas can only point to one context. In your situation, context1 has the same value as context2 . Declaring context2 doesn't give you a sort of "new layer" . Your code really should just use one context like this:

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

As for drawing your circles, use the context variable instead.

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();

So answering your question, one way you can specifically clear out a portion of the canvas is by calling clearRect only around the area of the black circle.

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

This only clears a certain portion of the canvas.

2. Multiple Canvases

One way you can draw two things on different contexts is by using multiple canvases stacked on top of one another. Use the z-index in CSS to position which canvas you want on top.

<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>

In Javascript, you should declare two separate canvases and contexts for each. This way, you can treat them as separate layers.

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);
};

Hope it helps.