# Working with circles on the canvas

**URL:** <https://forum.code.org/t/working-with-circles-on-the-canvas/40280>\
**Category:** Website and Tools Questions\
**Created:** [January 8, 2025, 6:58pm UTC](https://forum.code.org/t/working-with-circles-on-the-canvas/40280 "2025-01-08T18:58:25Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![sphelps](https://avatars.discourse-cdn.com/v4/letter/s/c89c15/32.png) [@sphelps](https://forum.code.org/u/sphelps)\
**Post date:** [January 8, 2025, 6:58pm UTC](https://forum.code.org/t/working-with-circles-on-the-canvas/40280/1 "2025-01-08T18:58:25Z")

</div>

I am trying to create a button that adds a circle and another button that deletes the last circle created. I thought adding circles to a list to help with that, but that does not seem to work. Any suggestions?

---

<div class="post-metadata">

**Author:** ![madeline\_r\_burton](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/madeline_r_burton/32/5037_2.png) [@madeline\_r\_burton](https://forum.code.org/u/madeline_r_burton)\
**Post date:** [January 9, 2025, 2:08am UTC](https://forum.code.org/t/working-with-circles-on-the-canvas/40280/2 "2025-01-09T02:08:19Z")

</div>

That does seem like the right idea. It’s a hard problem to debug without any code. Would you please share a link to your code so we can see what you’re looking at?

---

<div class="post-metadata">

**Author:** ![sphelps](https://avatars.discourse-cdn.com/v4/letter/s/c89c15/32.png) [@sphelps](https://forum.code.org/u/sphelps)\
**Post date:** [January 9, 2025, 9:23pm UTC](https://forum.code.org/t/working-with-circles-on-the-canvas/40280/3 "2025-01-09T21:23:34Z")

</div>

That would be helpful.

````auto
setActiveCanvas("canvas1");

var circleList=[];

onEvent("button1", "click", function( ) {
	appendItem(circleList,circle(randomNumber(50,250),randomNumber(50,300),randomNumber(10,100)));
	
});

onEvent("button2", "click", function( ) {
	removeItem(circleList,circleList.length-1);
	
});```
````

---

<div class="post-metadata">

**Author:** ![bhatnagars](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/bhatnagars/32/4919_2.png) [@bhatnagars](https://forum.code.org/u/bhatnagars)\
**Post date:** [January 9, 2025, 10:38pm UTC](https://forum.code.org/t/working-with-circles-on-the-canvas/40280/5 "2025-01-09T22:38:39Z")

</div>

I think you would have to do something like this

```auto
setActiveCanvas("canvas1");

var x =[];
var y =[];
var rad =[];

onEvent("button1", "click", function( ) {
  appendItem(x, randomNumber(50,250));
  appendItem(y, randomNumber(50,300));
  appendItem(rad, randomNumber(10,100));

  for (var i = 0; i < x.length; i++){
	  circle(x[i],y[i],rad[i]);
  }
});

onEvent("button2", "click", function( ) {
        clearCanvas();
		removeItem(x,x.length-1);
		removeItem(y,y.length-1);
		removeItem(rad,rad.length-1);
		for (var i = 0; i < x.length; i++){
	             circle(x[i],y[i],rad[i]);
	    }

});

```