how to remove the previous canvas shape when i call the canvas again?

Question

I make canvas to draw a square with random size , when I press Next button I call the canvasarea() function that draws a square with the random size that he get,but I faced a problem with that, because the previous square still in the canvas , and the previous of previous , and so on . what is the solution?

function canvasarea(){

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

context.beginPath();
var Size=getSize();

context.rect(10,10, 5*Size, 5*Size);
context.fillStyle = 'red';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';

context.stroke();


        }

function getSize(){
var min = 30;
var max = 40;
var size = Math.floor(Math.random() * (max - min + 1) + min)
document.getElementById("sideSize").innerHTML=size;
return size;
}

possible duplicate of [How to clear the canvas for redrawing](http://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing) — Maximillian Laumeister, Sep 10 '15 at 19:09
@MaximillianLaumeister `context.clearRect(0, 0, canvas.width, canvas.height);` **I tried it , but it remove the canvas at all , and when I call `canvasarea()` it doesn't draw any more** — Oraib Abo Rob, Sep 10 '15 at 19:17
Where in your code did you try it? Also, what do you mean by "it remove the canvas at all"? — Maximillian Laumeister, Sep 10 '15 at 19:18
@MaximillianLaumeister I need to draw again when I recall the function , — Oraib Abo Rob, Sep 10 '15 at 19:21
I put `context.clearRect(0, 0, canvas.width, canvas.height);` at the begining of `cnavasarea()` it didn't work , I tried to put it at the last thing in `canvasarea()` and it didn't work. i mean in _it remove the canvas at all_ that I can't draw anything after recall the `canvasarea()` , when I used `context.clearRect(0, 0, canvas.width, canvas.height);` @MaximillianLaumeister — Oraib Abo Rob, Sep 10 '15 at 19:25

Jackson · Answer 1 · 2015-09-10T19:56:32.033

1

Before you draw the shape, clear the canvas using this method:

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

Here is the the documentation for CanvasRenderingContext2D.clearRect()

edited Sep 10 '15 at 19:56

answered Sep 10 '15 at 19:52

Jackson

3,476
1
19
29

score 0 · Answer 2 · answered Sep 10 '15 at 19:49

I make 2 function ,the first one is to clear the canvas and the second one to redraw the canvas with the same properties of the original canvas but with different size

  function canvasarea(){
  var canvas = document.getElementById('square');
  var context = canvas.getContext('2d');
  context.beginPath();
  var Size=getSize();
  context.rect(10,10, 5*Size, 5*Size);
  context.fillStyle = 'red';
  context.fill();
  context.lineWidth =7;
  context.strokeStyle = 'black';
  clear(canvas);
  redraw();

        }

 function clear(a){
 a.getContext('2d').clearRect(0,0,a.width,a.height);
 }

 function redraw(){
 var canvas = document.getElementById('square');
 var context = canvas.getContext('2d');
 context.beginPath();
 var Size=getSize(); 
 context.rect(10,10, 5*Size, 5*Size);
 context.fillStyle = 'red';
 context.fill();
 context.lineWidth = 7;
 context.strokeStyle = 'black';


      }

how to remove the previous canvas shape when i call the canvas again?

2 Answers2