Languages

Menu
Sites
Language
how can removed a canvas.

I have a multiple canvas on the same page and would like to remove only one or some specific canvas, So how can removed a canvas. i don't want to use any hide function.

List

Responses

21 Replies
Palitsyna

Hello,

You can do it with remove() function, for example:

$('#canvas1').remove();

Example could be found here: http://jsfiddle.net/vj6NP/

 

Or, to remove only one from many canvases, you could select which one to remove using nth-of-type.

$('canvas:nth-of-type(1)').remove();

http://jsfiddle.net/vj6NP/3/

Palitsyna

Hello,

You can do it with remove() function, for example:

$('#canvas1').remove();

Example could be found here: http://jsfiddle.net/vj6NP/

 

Or, to remove only one from many canvases, you could select which one to remove using nth-of-type.

$('canvas:nth-of-type(1)').remove();

http://jsfiddle.net/vj6NP/3/

Vikram

Hi,

The similar function with remove() is detach(). Using below code 

$('#canvas').detach();

For detach(), different with remove() is all the binding events, such as additional data will be preserved.

AVSukhov

Hello,

As say Vikram, you can use detach() method. 

Te .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.

Palitsyna

Hello,

here you can find information about  detach() method with an example: https://api.jquery.com/detach/

Denis Miroshnikov

 

Hello there,

 

I'm also use multiple canvas in my web app , but have a problem with clear the one canvas in the same time i have clearance my another canvas?

how it possible?

 

 

TNX

Denis.

AVSukhov

Hello,

Could you please provide sample code or more details? It will be helpfull.

Denis Miroshnikov

Something like this:

 

CSS:

......

.canvas {
  position: absolute;
     background: transparent; /* #000000 transparent*/
     left: 0px;
     top: 0px;
     width: 100%;
     height: 100%;
     margin: 0;
}
.canvasd {
  position: absolute;
     background: #000000; /* #000000 red transparent*/
     left: 0px;
     top: 0px;
     width: 100%;
     height: 100%;
     margin: 0;
}

.....

HTML:

<body>
    <div id="box">
    <canvas class="canvasd" id="canvasDD"></canvas>
    <canvas class="canvas" id="canvas"></canvas>
    </div>
......
    </body>
 

JS:

....

    canvas = document.querySelector('canvas');
    context = canvas.getContext('2d');
    canvas.width = document.width;
    canvas.height = document.height;
    canvasD = document.querySelector('canvasDD');
    contextD = canvas.getContext('2d');
 

......

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

.......

AVSukhov

Hello,

Try to use:

canvas = document.querySelector("#canvas") if you use id for selector or ".canvas" if class

try to use contextD=canvasD.getContext('2D') instead contextD = canvas.getContext('2d')

Palitsyna

Hello,

as AVSukhov said, try to use document.querySelector("#canvas")  instead of document.querySelector('canvas');

Here you can find information about querySelector: http://www.w3schools.com/jsref/met_document_queryselector.asp

And here there are more examples of selectors: http://www.javascriptkit.com/dhtmltutors/css_selectors_api.shtml

Hope this will help you

Vikram

Hi,

I afraid it not possible but provide more detail info is better to research deep

steve mathew

One way is to clear out the canvas using context.clearRect(0,0, width, height)

Alternatively, you can append a new canvas element (and possibly remove the old one, depending on whether you will want to display it again) each time you want a new page. Something like this should do it:

var oldcanv = document.getElementById('canvas');
document.removeChild(oldcanv)

var canv = document.createElement('canvas');
canv.id = 'canvas';
document.body.appendChild(canv);
Just note that if you plan to keep more than one, each one must have a unique id instead of just id="canvas" (perhaps based on the page number - something like canvas-1).  

Palitsyna

Hello,

here you can find HTML5 Canvas Clear Rect tutorial: 

http://www.html5canvastutorials.com/advanced/html5-clear-canvas/

http://www.w3schools.com/tags/canvas_clearrect.asp

Both articles contain information about ClearRect() method and examples. They also have a kind of sandbox where you can try to change something and see how it works.

Vikram

HI,

Using the clearRect() method can clear one rectangle and should using fillRect() before. fillRect() is draw the rectangle which was already fill the color.

Seoghyun Kang

Hello,

 

If you install the Tizen 2.3.1 SDK, there are two samples using the clearRect() in the SDK. (AnalogWatch & BasicWatch.)

 

I think that the following code will be helpful to you

 

var canvas = document.querySelector("#myCanvas");
var context = canvas.getContext("2d");
context.clearRect(0, 0, context.canvas.width, context.canvas.height);

 

Thanks.

Denis Miroshnikov

Hello,

 is method not work with muliple canvas in one doc. ( not work correctly - this fill all canvas!)

Marco Buettner
For multiple canvas use document.querySelectorAll, it will fetch ALL given HTMLObjects 
var canvasList = document.querySelectorAll('canvas');
var context = null;
var canvas = null;

for(i = 0; i < canvasList.length; i++) {
    canvas = canvasList[i];
    context = canvas.getContext('2d');
    context.clearRect(0,0,context.canvas.width,context.canvas.height);
}

 

Denis Miroshnikov

I need to clear(fill) only one of my canvas, without clear other. my canvas in the same place in the HTML .

if use standard method, is fill(clear) all canvas on 2.3.x

 

Marco Buettner

It should works ... if u give all canvas SPECIFIC IDs

I will use something like that
http://jsfiddle.net/rpd2gv5m/

Denis Miroshnikov

Exacly, sorry but all of my canvas have a different IDs and Contexts, and it's not work on GearS real and emulator :

CSS:

......

.canvas {
   position: absolute;
      background: transparent; /* #000000 transparent*/
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      margin: 0;
 }
 .canvasd {
   position: absolute;
      background: #000000; /* #000000 red transparent*/
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      margin: 0;
 }

.....

HTML:

<body>
     <div id="box">
     <canvas class="canvasd" id="canvasDD"></canvas>
     <canvas class="canvas" id="canvas"></canvas>
     </div>
 ......
     </body>
 

JS:

....

    canvas = document.querySelector('canvas');
     context = canvas.getContext('2d');
     canvas.width = document.width;
     canvas.height = document.height;
     canvasD = document.querySelector('canvasDD');
     contextD = canvas.getContext('2d');
 

......

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

.......

Marco Buettner

Dont lie... it will works if u doesnt make stupid mistakes

You didnt see your problem? Did u know the basics of JS?

Our write

canvas = document.querySelector('canvas');
context = canvas.getContext('2d');
canvas.width = document.width;
canvas.height = document.height;
canvasD = document.querySelector('canvasDD');
contextD = canvas.getContext('2d');

Your relations are weird.

If u use

canvas = document.querySelector('canvas');

It will will fetch the FIRST canvas of the page! In your case it is the canvas with id with id canvasDD.

The context and contextD get the SAME canvas as relation... So it doesnt work like u expect.

Your correct relation should look like this

canvas = document.querySelector('#canvas');
context = canvas.getContext('2d');
canvas.width = document.width;
canvas.height = document.height;
canvasD = document.querySelector('#canvasDD');
contextD = canvasD.getContext('2d');
Btw... the same was writen on 15th October by AVSukhov