CODEWITHSUNDEEP
javascriptcanvasp5.js
Caspar B
Caspar B

Reputation: 539

Create a canvas with rounded corners in p5.js

I can't seem to find any information on the p5.js reference page as to how to round the corners on a canvas created through createCanvas(). This is possible with rectangles, as the fifth input the function takes is the border radius. This is not the case when creating a canvas.

I've put together a little example demonstrating a flat-cornered canvas with a curved-cornered rectangle inside, what I am aiming to reflect in the canvas' shape.

Any help would be appreciated. Thanks.

function setup() {
  createCanvas(200,200);
}

function draw() {
  background(32);
  rectangle();
}

function rectangle() {
  stroke(255);
  fill(255,255,255,100);
  rect(70,70,60,60,10);
}
<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/p5.js"></script>
</head>
<body>
</body>

Upvotes: 0

Views: 6767

Answers (1)

Tomasz
Tomasz

Reputation: 210

function setup() {
  createCanvas(200,200);
}

function draw() {
  background(32);
  rectangle();
}

function rectangle() {
  stroke(255);
  fill(255,255,255,100);
  rect(70,70,60,60,10);
}
canvas {
  border-radius: 12px;
}
<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/p5.js"></script>
</head>
<body>
</body>

Do you want get something like that? Via css i rounded the black canvas container.

Upvotes: 3

Related Questions