Estoy usando este complemento de jQuery para hacer dibujos gratuitos sobre un lienzo.
Quiero borrar el lienzo para volver a dibujar, pero después de hacerlo y cuando hago clic dentro del lienzo para volver a dibujar, aparece de nuevo el dibujo antiguo que borré.
$('#canvasFirst').sketch(); $('button').on("click", (evt) => { var canvas = document.getElementById('canvasFirst'); let context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); }); canvas { border: 1px solid; vertical-align: top } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/mobomo/sketch.js@master/lib/sketch.min.js"></script> <p>Draw on the below canvas, then press "clear" and try to draw again.</p> <canvas id="canvasFirst"> </canvas> <button>clear</button>Puede intentar guardar el estado del lienzo como un blob. Por ejemplo, como imagen/png. Hay dos cosas malas aquí:
Un pequeño inconveniente. Los métodos para convertir un blob en una imagen y viceversa son asincrónicos. Las promesas tienen que ser usadas.
Velocidad. Dudo mucho que esta solución sea adecuada para tareas que requieren velocidad: juegos, videos, etc.
const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const saveCanvasState = (canvas) => { const ctx = canvas.getContext('2d'); ctx.save(); // save state let blob; return new Promise((r) => { canvas.toBlob( // toBlob is async method (b) => { blob = b; r(() => new Promise((r) => { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.restore(); const img = new Image(); img.addEventListener('load', () => { URL.revokeObjectURL(img.src); ctx.drawImage(img, 0, 0); r(); }); img.src = URL.createObjectURL(blob); })); }, 'image/png', 1 ); }); }; ctx.fillStyle = 'green'; ctx.fillRect(10, 10, 100, 100); saveCanvasState(canvas).then((restore) => { ctx.fillStyle = 'black'; ctx.fillRect(150, 40, 100, 100); ctx.fillRect(100, 40, 100, 100); restore().then(() => { console.log('restored, can draw'); }); }); <canvas id="canvas"></canvas>Este complemento almacena todos los comandos de dibujo en una matriz de actions , y en cada redraw revisará toda la lista y dibujará todo de nuevo. (Lo que permite evitar tener agujeros en su trazo).
Los documentos son muy difíciles de entender, pero puede configurar el contenido de estas options a través del .sketch("options", value) .
Como se insinuó en este problema , establecerlo en un Array vacío eliminará todos los comandos anteriores. Todo lo que tienes que hacer entonces es volver a dibujar toda la escena, ahora vacía:
const $canvas = $('#canvasFirst'); $canvas.sketch(); $('button').on("click", (evt) => { $canvas.sketch("actions", []); $canvas.sketch("redraw"); }); canvas { border: 1px solid; vertical-align: top } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/mobomo/sketch.js@master/lib/sketch.min.js"></script> <p>Draw on the below canvas, then press "clear" and try to draw again.</p> <canvas id="canvasFirst"> </canvas> <button>clear</button>