How to Reset the Canvas Element in HTML5

I was playing around with the canvas element today and I realized that it wasn't easy resetting the canvas element once it was populated with an image. The popular way is to redraw the canvas with an empty path. canvasContext.clearRect(0, 0, canvasElem.width, canvasElem.height); This current method seems a little hacky to me but it's simple and it works. Here is what i did using this method.

var canvasElem = document.getElementsByClassName(className)[0]; var canvasContext = canvasElem.getContext('2d');

And then when you want to reset the canvas then just run this code: canvasContext.clearRect(0, 0, canvasElem.width

As of right now there is not built-in method to reset the canvas but this little hack will do the trick.

Edgar Pino

About Edgar Pino

I’m a passionate software engineer. I currently work at Envano Interactive on application backends, server management, and finding solutions to technological challenges our clients face.