![]() context.reset() īasically, it has the same effects as canvas.width += 0, except that it's more idiomatic. reset() method which will not only clear the canvas buffer but also completely reset all the properties of the context (styles etc.), reset its transformation matrix, clear its current sub-path, clear its states stack (the one controlled by save() and restore()), and remove all the clipping regions. This is the reason why the accepted answer did not solve my problem and I ended up wasting hours trying different hacks. Though beginPath is only to be used while drawing lines and not closed path like rect(). Actually, clearRect() is considered as the single line solution because most users do beginPath() before drawing any new path. I was wondering why a native solution does not exist. OR = Ĭons: Resets strokeStyle, fillStyle to black Laggy No lag Ĭons: Unnecessary if you are already using beginPath before drawing anythingĢ.Using the width/height hack: = Pros: Preserves strokeStyle, fillStyle etc. rect())ġ.To completely clear canvas irrespective of how you draw: context.clearRect(0, 0,, ) ![]() Non-fill type drawings are not cleared out (eg. clearRect() does not clear the canvas completely. This is 2018 and still there is no native method to completely clear canvas for redrawing. That is already relatively insignificant, but in most cases you will be drawing considerably more than you are clearing and I believe this performance difference be irrelevant. As the size of your canvas increases this difference drops. I've just done some profiling and (in Chrome) it is about 10% faster to clear a 300x150 (default size) canvas without resetting the transform. Use the identity matrix while clearing the canvasĬontext.clearRect(0, 0, canvas.width, canvas.height) The solution? Reset the transformation matrix prior to clearing the canvas: // Store the current transformation matrix using scale, rotate, or translate) then context.clearRect(0,0,canvas.width,canvas.height) will likely not clear the entire visible portion of the canvas. If you have modified the transformation matrix (e.g. transformations, lineWidth, strokeStyle, etc.), it is very slow (compared to clearRect), it doesn't work in all browsers, and it doesn't describe what you are actually trying to do. ![]() Resetting canvas.width resets all canvas state (e.g. This is the fastest and most descriptive way to clear the entire canvas. Use: context.clearRect(0, 0, canvas.width, canvas.height) ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |