How to delete every drawing on canvas javascript?

Question

so in my application when I click on the delete button it's not working. can anyone see the problem?

<button type="button" class="delete">
  <i class="fa-solid fa-trash-can"></i>
</button>

const deleteScreen = () => {
  context.fillStyle = "white";
  context.fillRect(0, 0, canvas.width, canvas.height);
};
deleteAll.addEventListener("onclick", deleteScreen);

to solve this problem, I create a white rectangle. this rectangle has the same height and width as the canvas. when we click on button, it should create rectangle and delete every drawing but it's not doing anything

what happens if you `context.clearRect(0, 0, canvas.width, canvas.height);` - not you say *I create a white rectangle* ... when clearly you're trying to create a blue one — Bravo, Mar 12 '22 at 09:33
so you didn't try the code I suggested, but you know it doesn't work ... sounds logical - perhaps `canvas` isn't defined, have you checked the browser developer tools console for errros? Or do you know there won't be any errors, so you didn't check/ — Bravo, Mar 12 '22 at 09:38
@Bravo canvas is defined and I already checked the console for errors, but there is no error — Excortia, Mar 12 '22 at 09:44
so neither `fillRect` nor `clearRect` work - must be some issue with code you aren't showing - I take it you've verified that `deleteScreen` is actually being called — Bravo, Mar 13 '22 at 02:22
Typo... replace `deleteAll.addEventListener("onclick"` with `deleteAll.addEventListener("click"` — Kaiido, Mar 13 '22 at 02:28

score 0 · Answer 1 · answered Mar 12 '22 at 09:39

0

Try this:

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

The clearRect() method sets the pixels in a rectangular area to transparent black (rgba(0,0,0,0)).

answered Mar 12 '22 at 09:39

Dimitri

1
1

no, that didn't work, didn't you read the comments – Bravo Mar 12 '22 at 09:40

How to delete every drawing on canvas javascript?

1 Answers1