Why there is this black line around my canvas?

dyrra

Hello, I have wrote this code

var w = 1;
var fr = 15;

var mode = 1;

function setup() { 
  createCanvas(250,250);
frameRate(fr);
}

function draw() { 
  //background(255); 
  fill(255,255,255,80);
  rect(0,0,width,height);
  translate(width/2, height/2); 
  scale(0.233,0.233);


  for (var i = 0; i < 9; i++) {
  noFill();
  scale(1.285,1.285);
  //translate(-19,-16);
  strokeWeight(w-i);
  polygon(0, 0, 51, 5); 


  }

  function polygon(x, y, radius, npoints) {
  var angle = TWO_PI / npoints;
  beginShape();
  for (var a = 0; a < TWO_PI; a += angle) {
    var sx = x + cos(a) * radius;
    var sy = y + sin(a) * radius;
    vertex(sx, sy);
  }
  endShape(CLOSE);
  }

  //if (mode == 1){w = w+0.5;}
  //if (mode == 2){w = w-0.5;}
  if (w == 1){mode = 1;}
  if (w == 9) {mode = 2;}

  if (mouseIsPressed) {
    if (mode == 1){w = w+0.5;}
  //  delay(500);
    if (mode == 2){w = w-0.5;}
  }

}

And I need to get rid off this black border around. I am experiencing this problem also with rotating pentagon. Thank you for any ideas.

kfrajer

If you enable the background() in draw(), would that solve your problem?

http://p5js.sketchpad.cc/sp/pad/view/wCRsKwW0rl/latest

Kf

dyrra

nope:-/ it behaves the same way with or without, black line frame is still flickering