CODEWITHSUNDEEP
javascriptcanvashtml5-canvassizep5.js
Loizos Vasileiou
Loizos Vasileiou

Reputation: 704

How to change the shape of the canvas itself?

I'm working on a project and I use createCapture(VIDEO); using p5js libraries, to get the video using my web camera. Then I store every image of that capture (from < video> element) and draw it in a canvas in the function draw().

I was wondering if it's possible the change the shape of the canvas(such as a mirror for example (oval or circle)).

Again, notice that I don't want to crop the image but the canvas itself.

Here is some code:

function setup(){

   canvas = createCanvas(640, 480); //480p
   canvas.parent('editedCanvas-container');

   originalCapture = createCapture(VIDEO);
   originalCapture.parent('originalVideo-container');
   originalCapture.size(640, 480); //480p
}

function draw(){

   frame = image(originalCapture, 0, 0, width, height);
}

If somebody has a clue please let me know.

Upvotes: 0

Views: 1160

Answers (1)

Juorder Gonzalez
Juorder Gonzalez

Reputation: 1652

You can change the shape of your canvas tag by applying css rules,

So try this css code

#canvasObject {
  border: 2px solid black;
  width: 200px;
  height: 150px;
  border-radius: 100px / 50px;
}
<canvas id="canvasObject">
</canvas>

For more info about how to achieve shapes in css, please refer this amazing post for css-tricks

Upvotes: 1

Related Questions