CODEWITHSUNDEEP
javascripthtmlcss
kirqe
kirqe

Reputation: 2470

Can't apply border radius to canvas (html2canvas)

The html div looks fine.

But when I use html2canvas the image displays wrong.

enter image description here

enter image description here

Background

#ref{
    width: 360px;
    height: 360px;
    background: url(/assets/refer/bec.jpg) 0 0 no-repeat;
    background-size: cover;
    overflow: hidden;
    margin-top: 15px;
    margin-left: 70px;
    float: left;
}

I use this for rounding

.circular {
    background-size: cover;
    display: block;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 150px;
    height: 150px;
    border-radius: 150px;
    margin: 70px auto;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
}

html2canvas

html2canvas(document.getElementById("qqq"), {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  },
  width: 500,
  height: 500
});

What am I doing wrong? ty

Upvotes: 1

Views: 3111

Answers (4)

sushant mahadik
sushant mahadik

Reputation: 11

I had faced problems for ellipse shape while exporting pdf using Html2Canvas, so I was set border-radius as half of (width + height) of shape, so problem solved..

Upvotes: 1

Jayababu
Jayababu

Reputation: 1621

As of my knowledge for html2canvas border radius should be half of the width or height at max.In your case it should be max 75.

.circular {
    background-size: cover;
    display: block;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 150px;
    height: 150px;
    border-radius: 75px;
    margin: 70px auto;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
}

Upvotes: 4

ılǝ
ılǝ

Reputation: 3508

This is a reported bug on html2canvas (see here) and a fix was merged into the repo.

If you're using release version 0.4.1, edit function calculateCurvePoints as follows:

...
blh = borderRadius[3][0],
    blv = borderRadius[3][1];

      var halfHeight = Math.floor(height / 2);
      tlh = tlh > halfHeight ? halfHeight : tlh;
      tlv = tlv > halfHeight ? halfHeight : tlv;
      trh = trh > halfHeight ? halfHeight : trh;
      trv = trv > halfHeight ? halfHeight : trv;
      brh = brh > halfHeight ? halfHeight : brh;
      brv = brv > halfHeight ? halfHeight : brv;
      blh = blh > halfHeight ? halfHeight : blh;
      blv = blv > halfHeight ? halfHeight : blv;

    var topWidth = width - trh,
    rightHeight = height - brv,
...

Credit for Grom-S for reporting and resolving this.

Upvotes: 1

Ali Habibzadeh
Ali Habibzadeh

Reputation: 11548

canvas picks up the border-radius fine. Perhaps your content is not covering the edges so you can't see it. Try making sure your content fills the canvas and covers the corners

Upvotes: 1

Related Questions