Comment effacer le canevas pour le redessiner

Après avoir expérimenté des opérations composites et dessiné des images sur la toile, j'essaie maintenant de supprimer les images et le compositing. Comment puis-je faire cela?

J'ai besoin d'effacer la toile pour redessiner d'autres images; cela peut durer un certain temps, donc je ne pense pas que dessiner un nouveau rectangle à chaque fois soit l'option la plus efficace.

const context = canvas.getContext('2d');

context.clearRect(0, 0, canvas.width, canvas.height);

Utilisation: context.clearRect(0, 0, canvas.width, canvas.height);

C'est le moyen le plus rapide et le plus descriptif pour effacer l'intégralité du canevas.

Ne pas utiliser: canvas.width = canvas.width;

La réinitialisation canvas.widthréinitialise tous les états du canevas (par exemple les transformations, lineWidth, strokeStyle, etc.), elle est très lente (par rapport à clearRect), elle ne fonctionne pas dans tous les navigateurs et ne décrit pas ce que vous essayez réellement de faire.

Gérer les coordonnées transformées

Si vous avez modifié la matrice de transformation (par exemple , en utilisant scale, rotateoutranslate ) alors context.clearRect(0,0,canvas.width,canvas.height)ne sera probablement pas effacer toute la partie visible de la toile.

La solution? Réinitialisez la matrice de transformation avant d'effacer le canevas:

// Store the current transformation matrix
context.save();

// Use the identity matrix while clearing the canvas
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);

// Restore the transform
context.restore();

Éditer: je viens de faire du profilage et (dans Chrome), il est environ 10% plus rapide pour effacer un canevas 300x150 (taille par défaut) sans réinitialiser la transformation. À mesure que la taille de votre toile augmente, cette différence diminue.

C'est déjà relativement insignifiant, mais dans la plupart des cas, vous tirerez beaucoup plus que vous ne supprimez et je pense que cette différence de performances n'est pas pertinente.

100000 iterations averaged 10 times:
1885ms to clear
2112ms to reset and clear

Si vous dessinez des lignes, assurez-vous de ne pas oublier:

context.beginPath();

Sinon, les lignes ne seront pas effacées.

D'autres ont déjà fait un excellent travail en répondant à la question mais si une clear()méthode simple sur l'objet contextuel vous serait utile (c'était à moi), c'est l'implémentation que j'utilise en fonction des réponses ici:

CanvasRenderingContext2D.prototype.clear = 
  CanvasRenderingContext2D.prototype.clear || function (preserveTransform) {
    if (preserveTransform) {
      this.save();
      this.setTransform(1, 0, 0, 1, 0, 0);
    }

    this.clearRect(0, 0, this.canvas.width, this.canvas.height);

    if (preserveTransform) {
      this.restore();
    }           
};

Usage:

window.onload = function () {
  var canvas = document.getElementById('canvasId');
  var context = canvas.getContext('2d');

  // do some drawing
  context.clear();

  // do some more drawing
  context.setTransform(-1, 0, 0, 1, 200, 200);
  // do some drawing with the new transform
  context.clear(true);
  // draw more, still using the preserved transform
};

• Chrome répond bien à: context.clearRect ( x , y , w , h );comme suggéré par @ Pentium10 mais IE9 semble ignorer complètement cette instruction.
• IE9 semble répondre à: canvas.width = canvas.width;mais il n'efface pas les lignes, juste les formes, les images et autres objets à moins que vous n'utilisiez également la solution de @John Allsopp de changer d'abord la largeur.

Donc, si vous avez un canevas et un contexte créés comme ceci:

var canvas = document.getElementById('my-canvas');
var context = canvas.getContext('2d');

Vous pouvez utiliser une méthode comme celle-ci:

function clearCanvas(context, canvas) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  var w = canvas.width;
  canvas.width = 1;
  canvas.width = w;
}

Nous sommes en 2018 et il n'y a toujours pas de méthode native pour effacer complètement le canevas pour le redessiner. clearRect() n'efface pas complètement la toile. Les dessins de type non remplis ne sont pas effacés (par exemple. rect())

1.Pour une toile complètement claire quelle que soit la façon dont vous dessinez:

context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.beginPath();

Avantages: préserve strokeStyle, fillStyle, etc.; Pas de décalage;

Inconvénients: inutile si vous utilisez déjà beginPath avant de dessiner quoi que ce soit

2.Utilisation du hack largeur / hauteur:

context.canvas.width = context.canvas.width;

OU

context.canvas.height = context.canvas.height;

Pour: Fonctionne avec IE Contre: Réinitialise strokeStyle, fillStyle sur noir; Laggy;

Je me demandais pourquoi une solution native n'existe pas. En fait, clearRect()est considéré comme la solution à ligne unique car la plupart des utilisateurs le font beginPath()avant de dessiner un nouveau chemin. Bien que beginPath ne soit utilisé que pour dessiner des lignes et non un chemin fermé commerect().

C'est la raison pour laquelle la réponse acceptée n'a pas résolu mon problème et j'ai fini par perdre des heures à essayer différents hacks. Maudis-tu mozilla

Utilisez la méthode clearRect en passant les coordonnées x, y et la hauteur et la largeur du canevas. ClearRect effacera la toile entière comme:

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);

il y a une tonne de bonnes réponses ici. une autre remarque est que parfois c'est amusant de ne nettoyer que partiellement la toile. c'est-à-dire "effacer" l'image précédente au lieu de l'effacer entièrement. cela peut donner de beaux effets de sentiers.

c'est facile. en supposant que votre couleur de fond est blanche:

// assuming background color = white and "eraseAlpha" is a value from 0 to 1.
myContext.fillStyle = "rgba(255, 255, 255, " + eraseAlpha + ")";
myContext.fillRect(0, 0, w, h);

Un moyen rapide est de faire

canvas.width = canvas.width

Idk comment ça marche mais ça marche!

C'est ce que j'utilise, quelles que soient les frontières et les transformations matricielles:

function clearCanvas(canvas) {
  const ctx = canvas.getContext('2d');
  ctx.save();
  ctx.globalCompositeOperation = 'copy';
  ctx.strokeStyle = 'transparent';
  ctx.beginPath();
  ctx.lineTo(0, 0);
  ctx.stroke();
  ctx.restore();
}

Fondamentalement, il enregistre l'état actuel du contexte et dessine un pixel transparent avec copyas globalCompositeOperation. Restaure ensuite l'état de contexte précédent.

Cela a fonctionné pour mon pieChart dans chart.js

<div class="pie_nut" id="pieChartContainer">
    <canvas id="pieChart" height="5" width="6"></canvas> 
</div>

$('#pieChartContainer').html(''); //remove canvas from container
$('#pieChartContainer').html('<canvas id="pieChart" height="5" width="6"></canvas>'); //add it back to the container

J'ai constaté que dans tous les navigateurs que je teste, le moyen le plus rapide est de remplir effectivement le blanc ou la couleur de votre choix. J'ai un très grand moniteur et en mode plein écran, le clearRect est terriblement lent, mais le fillRect est raisonnable.

context.fillStyle = "#ffffff";
context.fillRect(0,0,canvas.width, canvas.height);

L'inconvénient est que la toile n'est plus transparente.

dans le webkit, vous devez définir la largeur sur une valeur différente, puis vous pouvez la redéfinir sur la valeur initiale

function clear(context, color)
{
    var tmp = context.fillStyle;
    context.fillStyle = color;
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
    context.fillStyle = tmp;
}

Un moyen simple mais peu lisible est d'écrire ceci:

var canvas = document.getElementId('canvas');

// after doing some rendering

canvas.width = canvas.width;  // clear the whole canvas

J'utilise toujours

cxt.fillStyle = "rgb(255, 255, 255)";
cxt.fillRect(0, 0, canvas.width, canvas.height);

context.clearRect(0,0,w,h)   

remplir le rectangle donné avec des valeurs RGBA:
0 0 0 0: avec Chrome
0 0 0 255: avec FF & Safari

Mais

context.clearRect(0,0,w,h);    
context.fillStyle = 'rgba(0,0,0,1)';  
context.fillRect(0,0,w,h);  

laissez le rectangle rempli de
0 0 0 255
peu importe le navigateur!

Context.clearRect(starting width, starting height, ending width, ending height);

Exemple: context.clearRect(0, 0, canvas.width, canvas.height);

le chemin le plus court:

canvas.width += 0

moyen le plus rapide:

canvas = document.getElementById("canvas");
c = canvas.getContext("2d");

//... some drawing here

i = c.createImageData(canvas.width, canvas.height);
c.putImageData(i, 0, 0); // clear context by putting empty image data

Si vous utilisez clearRect uniquement, si vous l'avez dans un formulaire pour soumettre votre dessin, vous obtiendrez un envoi à la place de la suppression, ou peut-être qu'il peut d'abord être effacé puis télécharger un dessin nul, vous devrez donc ajouter un preventDefault au début de la fonction:

   function clearCanvas(canvas,ctx) {
        event.preventDefault();
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }


<input type="button" value="Clear Sketchpad" id="clearbutton" onclick="clearCanvas(canvas,ctx);">

J'espère que cela aide quelqu'un.

J'utilise toujours ça

ctx.clearRect(0, 0, canvas.width, canvas.height)
window.requestAnimationFrame(functionToBeCalled)

REMARQUE

la combinaison de clearRect et requestAnimationFrame permet une animation plus fluide si c'est ce que vous recherchez

Ce sont tous d'excellents exemples de la façon dont vous effacez un canevas standard, mais si vous utilisez paperjs, cela fonctionnera:

Définissez une variable globale en JavaScript:

var clearCanvas = false;

À partir de votre PaperScript, définissez:

function onFrame(event){
    if(clearCanvas && project.activeLayer.hasChildren()){
        project.activeLayer.removeChildren();
        clearCanvas = false;
    }
}

Maintenant, où que vous définissiez clearCanvas sur true, tous les éléments de l'écran seront supprimés.