How to clear the canvas for redrawing

Question

After experimenting with composite operations and drawing images on the canvas I m now trying to remove images and compositing  How do I do this   I need to clear the canvas for redrawing other images  this can go on for a while so I don t think drawing a new rectangle every time will be the most efficient option

User · Answer

I always use this  ctx clearRect 0  0  canvas width  canvas height  window requestAnimationFrame functionToBeCalled    NOTE  combining clearRect and requestAnimationFrame allows for more fluid animation if that is what you re going for

User · Answer

This is what I use  regardless boundaries and matrix transformations   function clearCanvas canvas      const ctx   canvas getContext  2d      ctx save      ctx globalCompositeOperation    copy     ctx strokeStyle    transparent     ctx beginPath      ctx lineTo 0  0     ctx stroke      ctx restore        Basically  it saves the current state of the context  and draws a transparent pixel with copy as globalCompositeOperation  Then  restores the previous context state

User · Answer

there are a ton of good answers here  one further note is that sometimes it s fun to only partially clear the canvas  that is   fade out  the previous image instead of erasing it entirely  this can give nice trails effects   it s easy  supposing your background color is white      assuming background color   white and  eraseAlpha  is a value from 0 to 1  myContext fillStyle    rgba 255  255  255      eraseAlpha        myContext fillRect 0  0  w  h

User · Answer

Given that canvas is a canvas element  const context   canvas getContext  2d     context clearRect 0  0  canvas width  canvas height

User · Answer

This worked for my pieChart in chart js           lt div class  pie nut  id  pieChartContainer  gt       lt canvas id  pieChart  height  5  width  6  gt  lt  canvas gt    lt  div gt       pieChartContainer   html        remove canvas from container     pieChartContainer   html   lt canvas id  pieChart  height  5  width  6  gt  lt  canvas gt       add it back to the container

User · Answer

I always use cxt fillStyle    quot rgb 255  255  255  quot   cxt fillRect 0  0  canvas width  canvas height    For a custom color  and ctx clearRect 0  0  canvas width  canvas height    For making the canvas transparent when clearing

User · Answer

A simple  but not very readable way is to write this   var canvas   document getElementId  canvas        after doing some rendering  canvas width   canvas width      clear the whole canvas

User · Answer

Others have already done an excellent job answering the question but if a simple clear   method on the context object would be useful to you  it was to me   this is the implementation I use based on answers here   CanvasRenderingContext2D prototype clear      CanvasRenderingContext2D prototype clear    function  preserveTransform        if  preserveTransform          this save          this setTransform 1  0  0  1  0  0              this clearRect 0  0  this canvas width  this canvas height        if  preserveTransform          this restore                          Usage   window onload   function        var canvas   document getElementById  canvasId      var context   canvas getContext  2d          do some drawing   context clear          do some more drawing   context setTransform -1  0  0  1  200  200        do some drawing with the new transform   context clear true        draw more  still using the preserved transform

User · Answer

If you use clearRect only  if you have it in a form to submit your drawing  you ll get a submit instead the clearing  or maybe it can be cleared first and then upload a void drawing  so you ll need to add a preventDefault at the beggining of the function      function clearCanvas canvas ctx            event preventDefault            ctx clearRect 0  0  canvas width  canvas height            lt input type  button  value  Clear Sketchpad  id  clearbutton  onclick  clearCanvas canvas ctx    gt    Hope it helps someone

User · Answer

Use  context clearRect 0  0  canvas width  canvas height    This is the fastest and most descriptive way to clear the entire canvas   Do not use  canvas width   canvas width   Resetting canvas width resets all canvas state  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   Dealing with transformed coordinates  If you have modified the transformation matrix  e g  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   The solution  Reset the transformation matrix prior to clearing the canvas      Store the current transformation matrix context save        Use the identity matrix while clearing the canvas context setTransform 1  0  0  1  0  0   context clearRect 0  0  canvas width  canvas height       Restore the transform context restore      Edit  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  As the size of your canvas increases this difference drops   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   100000 iterations averaged 10 times  1885ms to clear 2112ms to reset and clear

User · Answer

Context clearRect starting width  starting height  ending width  ending height     Example  context clearRect 0  0  canvas width  canvas height

User · Answer

Use clearRect method by passing x y co-ordinates and height and width of canvas  ClearRect will clear whole canvas as     canvas   document getElementById  canvas    ctx   canvas getContext  2d    ctx clearRect 0  0  canvas width  canvas height

User · Answer

These are all great examples of how you clear a standard canvas  but if you are using paperjs  then this will work   Define a global variable in JavaScript   var clearCanvas   false    From your PaperScript define   function onFrame event       if clearCanvas  amp  amp  project activeLayer hasChildren             project activeLayer removeChildren            clearCanvas   false            Now wherever you set clearCanvas to true  it will clear all the items from the screen

User · Answer

in webkit you need to set the width to a different value  then you can set it back to the initial value

User · Answer

This is 2018 and still there is no native method to completely clear canvas for redrawing  clearRect   does not clear the canvas completely  Non-fill type drawings are not cleared out  eg  rect     1 To completely clear canvas irrespective of how you draw   context clearRect 0  0  context canvas width  context canvas height   context beginPath      Pros  Preserves strokeStyle  fillStyle etc   No lag   Cons  Unnecessary if you are already using beginPath before drawing anything  2 Using the width height hack   context canvas width   context canvas width    OR  context canvas height   context canvas height    Pros  Works with IE Cons  Resets strokeStyle  fillStyle to black  Laggy   I was wondering why a native solution does not exist  Actually  clearRect   is considered as the single line solution because most users do beginPath   before drawing any new path  Though beginPath is only to be used while drawing lines and not closed path like rect     This is the reason why the accepted answer did not solve my problem and I ended up wasting hours trying different hacks  Curse you mozilla

User · Answer

Chrome responds well to  context clearRect   x   y   w   h    as suggested by  Pentium10 but IE9 seems to completely ignore this instruction  IE9 seems to respond to  canvas width   canvas width  but it doesn t clear lines  just shapes  pictures and other objects unless you also use  John Allsopp s solution of first changing the width    So if you have a canvas and context created like this   var canvas   document getElementById  my-canvas    var context   canvas getContext  2d      You can use a method like this   function clearCanvas context  canvas      context clearRect 0  0  canvas width  canvas height     var w   canvas width    canvas width   1    canvas width   w

User · Answer

the shortest way   canvas width    0

User · Answer

I have found that in all browsers I test  the fastest way is to actually fillRect with white  or whataever color you would like   I have a very large monitor and in full screen mode the clearRect is agonizingly slow  but the fillRect is reasonable   context fillStyle     ffffff   context fillRect 0 0 canvas width  canvas height     The drawback is that the canvas is no longer transparent

User · Answer

A quick way is to do  canvas width   canvas width   Idk how it works but it does

User · Answer

fastest way   canvas   document getElementById  canvas    c   canvas getContext  2d           some drawing here  i   c createImageData canvas width  canvas height   c putImageData i  0  0      clear context by putting empty image data

User · Answer

context clearRect 0 0 w h       fill the given rectangle with RGBA values    0 0 0 0   with Chrome 0 0 0 255   with FF  amp  Safari  But    context clearRect 0 0 w h       context fillStyle    rgba 0 0 0 1      context fillRect 0 0 w h       let the rectangle filled with 0 0 0 255 no matter the browser

User · Answer

function clear context  color        var tmp   context fillStyle      context fillStyle   color      context fillRect 0  0  context canvas width  context canvas height       context fillStyle   tmp

User · Answer

If you are drawing lines  make sure you don t forget   context beginPath      Otherwise the lines won t get cleared

[javascript] How to clear the canvas for redrawing

Examples related to javascript

Examples related to html

Examples related to canvas

Examples related to html5-canvas

Examples related to composite