0
308
ViewsHow can I remove/crop angle from corners of some image
I'm trying to crop an image to make it fit on my margin. One example of what I'm trying to achieve.
The original image:
After the crop:
I already managed to crop the rectagle, but I have no idea how I can remove the corners. I tried with ctx.arc(), but I'm kinda confused with the values that I should use for x, y, radius and angle. The border-radius that I'm using depends on the screen size, but I've the value.
·
Santiago Gelvez
1 answers
Answer question0
Use clip() with a Path2D and arcTo(). You will have to figure out your specific values which can be done with a little math (or trial and error). Be sure to draw you image after you clip()
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')
canvas.width = 400;
canvas.height = 400;
let border = new Path2D();
border.arcTo(canvas.width, 0, canvas.width, 20, 50);
border.arcTo(canvas.width, canvas.height, 0, canvas.height, 50);
border.arcTo(0, canvas.height, 0, 20, 50);
border.arcTo(0, 0, 20, 0, 50);
ctx.clip(border);
function draw() {
ctx.fillStyle = 'green';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
draw()<canvas id="canvas"></canvas>
·
Santiago Gelvez
Report
Answer question