Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial![](https://ecs-static.teamtreehouse.com/assets/views/marketing/shared/community-banner-white-47072046c51352fe6a69f5e691ff5700b28bb11d45197d7bdf066d9ea3f72d0c.webp)
![Caesar Bell](https://uploads.teamtreehouse.com/production/profile-photos/132452/micro_Screen_Shot_2021-04-08_at_11.24.24_AM.jpg)
Caesar Bell
24,827 PointsResetting the canvas with the reset button
I created a reset button, but I am trying to setup the drawing app to where a user can click on the button and reset the canvas without having to always refresh the page to have a fresh new canvas to draw on. So far my code is
<button id="resetCanvas">Reset</button>
//When clicked reset the canvas back to an empy canvas
$("#resetCanvas").click(function(){
context.width = context.width;
});
I did some reseach and most doc say the code above is the simpliest way to reset the canvas. Or I could use the following code
ctx.clearRect(0, 0, canvas.width, canvas.height);
But neither one works for me can someone help me
3 Answers
![simhub](https://uploads.teamtreehouse.com/production/profile-photos/2991642/micro_SimHub-grad.png)
simhub
26,543 PointsHi Caesar, maybe this helps:
$("#resetCanvas").click(function(){
var canvas= document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
![Niall Maher](https://uploads.teamtreehouse.com/production/profile-photos/3362842/micro_20141123_175703.jpg)
Niall Maher
16,985 PointsI still can't get this to work :/ Your above code isn't working either! My poor head can't get around this one :P
![Caesar Bell](https://uploads.teamtreehouse.com/production/profile-photos/132452/micro_Screen_Shot_2021-04-08_at_11.24.24_AM.jpg)
Caesar Bell
24,827 PointsHow is the rest of your code setup?
![allisong](https://secure.gravatar.com/avatar/7c9c2926c530c6205628fb2e488d2f9b?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
allisong
10,414 PointsCesar, make sure that your variables are correct. I was playing around with this, and it didn't work at first. I noticed that my variable for selecting the canvas was $canvas.
'''$("#resetCanvas").click(function(){ //Used the [0] to select the correct element in canvas context.clearRect(0,0, $canvas[0].width, $canvas[0].height); ''' });
![Nicole Chinn](https://secure.gravatar.com/avatar/1b085e20f82604b6afcf48a670fb9a82?s=60&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
Nicole Chinn
8,122 PointsThanks! This totally solved the problem I was having because I was trying to clear on the canvas element width and height.
Caesar Bell
24,827 PointsCaesar Bell
24,827 PointsOkay thank you, but I had something similar to that using the jquery method. But what I was missing was using the [0] which selected the first element. Here is the updated code