clearRect not working

by

Your real problem is you are not closing your circle’s path.

Add ctx.beginPath() before you draw the circle.

jsFiddle.

Also, some tips…

  • Your assets should not be responsible for drawing themselves (their draw() method). Instead, perhaps define their visual properties (is it a circle? radius?) and let your main render function handle canvas specific drawing (this also has the advantage that you can switch your renderer to regular DOM elements or WebGL further down the track easily).
  • Instead of setInterval(), use requestAnimationFrame(). Support is not that great at the moment so you may want to shim its functionality with setInterval() or the recursive setTimeout() pattern.
  • Your clearRect() should be passed the dimensions from the canvas element (or have them defined somewhere). Including them in your rendering functions is akin to magic numbers and could lead to a maintenance issue further down the track.

More Related Contents:

  1. Using HTML5/Canvas/JavaScript to take in-browser screenshots
  2. Capture HTML Canvas as gif/jpg/png/pdf?
  3. Resizing an image in an HTML5 canvas
  4. Get pixel color from canvas, on mousemove
  5. Why does canvas.toDataURL() throw a security exception?
  6. Zoom Canvas to Mouse Cursor
  7. Zoom in on a point (using scale and translate)
  8. how to save canvas as png image?
  9. Does HTML5/Canvas Support Double Buffering?
  10. html 5 canvas LineTo() line color issues
  11. HTML5 Canvas camera/viewport – how to actually do it?
  12. HTML5 canvas ctx.fillText won’t do line breaks?
  13. How to resize html canvas element?
  14. How do I rotate a single object on an html 5 canvas?
  15. Detect if user clicks inside a circle
  16. Detect if user clicks inside a circle
  17. addEventListener for keydown on Canvas
  18. How to determine the intended frame-rate on an html video element
  19. How to save canvas animation as gif or webm?
  20. canvas.toDataURL() Security Error The operation is insecure
  21. HTML5 Dynamically create Canvas
  22. clearing circular regions from HTML5 Canvas
  23. Is there an equivalent of canvas’s toDataURL method for SVG? [closed]
  24. Snap edges of objects to each other and prevent overlap
  25. HTML5 Canvas translate(0.5,0.5) not fixing line blurryness
  26. Scaling an image to fit on canvas
  27. Creating a Clickable Grid in a Web Browser
  28. Save many canvas element as image
  29. How to style canvas elements with CSS
  30. canvas- Cropping images in different shapes

Leave a Comment