Canvas drawn arcs are unaffected by clearRect and other rectangles.




Canvas: 2D
8 years ago
8 years ago


(Reporter: timeroot.alex, Unassigned)



Firefox Tracking Flags

(Not tracked)



(1 attachment)



8 years ago
User-Agent:       Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16
Build Identifier: 

A drawn arc on a canvas element will remain there, unaffected by a clearRect or fillRect which goes over it, as if it is on a seperate layer from all rectangles.

Reproducible: Always

Steps to Reproduce:
1. Create a new HTML docment.
2. Script it to create an arc, fill it, and execute clearRect and/or fillRect over it.
Actual Results:  
The arc remains there, unaffected by the rectangle, but all area around it is filled.

Expected Results:  
Drawn over the arc, and colored it the same as the other parts of the rectangle.

Occured in Firefox 4.5.3


8 years ago
Keywords: html5
There is no "Firefox 4.5.3"...  Did you mean 3.5.3?

Do you mind attaching an HTML page to this bug that shows the problem?

Comment 2

8 years ago
Oops, err, don't know where I got that from... I meant 3.5.9.

I can't provide an attatchment right now, but here was the code where I noticed the bug:

<title>Canvas tutorial</title>  
<script type="text/javascript">
  var paddleY = 0; 
  var ballX = 200;
  var ballY = 200;
  var ballLeft = true;

  function draw(){  
   var canvas = document.getElementById('canvas');
   document.onkeypress = keyCheck;
   if (canvas.getContext){  
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = "rgb(255,255,255)";
    ctx.fillStyle = "rgb(80,150,80)";
    ctx.fillStyle = "rgb(200,20,20)";

  function movePaddle(dir){
   if (dir == 1 && paddleY<250){
    paddleY = paddleY + 10;
   } else if (dir == -1 && paddleY>0){
    paddleY = paddleY - 10;
  function keyCheck(e){
   var keyID = e.keyCode;
   switch(keyID) {
   case 38:
   case 40:
   case 39:
  function timeStep(){
   if (ballLeft) {
    if (ballX == 20 && ballY < (paddleY + 50) && ballY > paddleY) {
     ballLeft = false;
     ballX = ballX + 10;
    } else {
     ballX = ballX - 10;
   } else {
    if (ballX == 280) { ballLeft = true; ballX = ballX - 10; } else
    {ballX = ballX + 10;}
<style type="text/css">  
  canvas { border: 1px solid black; }  
<body onload="draw();">  
<canvas id="canvas" width="300" height="300" onkeypress="keyCheck();"></canvas> 
<input type="button" value="Up" onClick="movePaddle(-1);draw();" >
<input type="button" value="Down" onClick="movePaddle(1);draw();" >
Created attachment 443553 [details]
Reporter's testcase; to reproduce bug click the canvas and hit the right arrow a few times; only one ball should show up

Not sure what was difficult about attaching that...

Comment 4

8 years ago
It's difficult because i'm doing this from an iPhone. And it's not even mine. :-s

So, does it happen on any other versions of Firefox as well?
OK, that code is just buggy as far as I can see.  It calls arc() over and over without ever calling beginPath(), so all the arcs are added to the same (current) path.  Then every fill() call fills all the previously drawn arcs.  The clearRect clears things just fine; it's just that you're redrawing all previous ball positions with every fill().

Putting a ctx.beginPath() before your clearRect() makes the right thing happen.  Since fillRect() doesn't add to the current path, you weren't seeing the same issue with the green paddle; had you used rect() + fill() instead, you would have seen the same problem there.
Last Resolved: 8 years ago
Resolution: --- → INVALID
Oh, and this will happen with any version of Firefox.  Also happens over here with Safari and Opera.

Comment 7

8 years ago
Oh, I see - my friend was just getting into programming, and neither of us could figure out the bug. Thanks for your time!
Not a problem.  Thanks for filing the bug report.  Just make sure to keep filing bugs in the future, especially if the behavior is different from other browsers.
You need to log in before you can comment on or make changes to this bug.