Clear canvas by JavaScript

Question

I am using this jQuery plugin to make free drawing over a canvas.
I want to clear the canvas for redrawing but after I do and when I click inside canvas for redrawing the old drawing that I cleared appears again

$('#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>

Use [beginPath](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath). — Teemu, Mar 30 '22 at 04:54
Save the current state of the canvas, then set it back to that when you're done. — Samathingamajig, Mar 30 '22 at 04:58
@Teemu That’s a good guess! I have once answered a Canvas question with [a table and visualization](/a/69730036/4642212) that explains what different path-related methods are doing, and where `beginPath` fits into all of this. — Sebastian Simon, Mar 30 '22 at 04:58
@OP Can you post the code that draws to the canvas? It's likely you need to reset some other variables back to their initial values when you want to clear but we can't know for sure without your other code. — cam, Mar 30 '22 at 05:01
I am using sketch.min.js for drawing https://cdn.jsdelivr.net/gh/mobomo/sketch.js@master/lib/sketch.min.js — MrMustafa, Mar 30 '22 at 05:03
You'll not get much help like this. Please produce code that *reproduces* the problem -- as small as possible, but enough to reproduce it. — trincot, Mar 30 '22 at 06:03

Alexander · Answer 1 · 2022-03-30T07:38:23.077

You can try to save the state of the canvas as a blob. For example, as image/png. There are two bad things here:

A small inconvenience. Methods for converting a blob to an image and back are asynchronous. Promises have to be used.
Speed. I strongly doubt that this solution is suitable for tasks that require speed - games, 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>

score 0 · Accepted Answer · answered Mar 30 '22 at 07:18

This plugin stores all the drawing commands in an actions array, and at each redraw it will go through that whole list and draw the full thing again. (Which allows to avoid having holes in your stroke).
The docs are very hard to grasp, but you can set this options's content through the .sketch("options", value) method.

As hinted in this issue, setting it to an empty Array will thus remove all the previous commands. All you have to do then is to redraw the whole scene, now empty:

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>

There is a `defaultSize` option: `$canvas.sketch({defaultSize:1})` — Kaiido, Mar 30 '22 at 12:46
Hi @Kaiido, I have problem, when I try to write something on canvas from Mobile or IPad, the drawing is disappear when I up my Pin and touch screen again, If I touch screen again by Pin the drawing is disappear — MrMustafa, Apr 08 '22 at 10:56

Clear canvas by JavaScript

2 Answers2

Linked