[whatwg] Canvas roundedRect

[Ian Hickson]

On Thu, 21 Jun 2012, Igor Trindade Oliveira wrote:
>
> Currently, canvas2d does not have support for rounded rectangles and
> the web developers are implementing rounded rectangles using arcs or
> bezier curves.[1][2]

The arcTo() method is very specifically designed to enable rounded 
rectangles to be done relatively easily:

  function roundRect(c, x, y, w, h, r) {
    if (r > w/2)
      r = w/2;
    if (r > h/2)
      r = h/2;
    c.beginPath();
    c.moveTo(x+w/2, y);
    c.arcTo(x+w, y,   x+w,   y+h/2, r);
    c.arcTo(x+w, y+h, x+w/2, y+h,   r);
    c.arcTo(x,   y+h, x,     y+h/2, r);
    c.arcTo(x,   y,   x+w/2, y,     r);
    c.closePath();
    c.stroke();
  }

I don't think we need to add a feature to the API just for this.


On Thu, 21 Jun 2012, David Dailey wrote:
>
> I have seen how the <canvas> folks like to re-invent wheels

Actually we try to reuse SVG's solutions where possible.


On Thu, 21 Jun 2012, Bronislav KluÄ~Mka wrote:
>
> So why do ve have rect? 4 lines could do it... simple enough...

We have rect() mostly for historical reasons -- it was included in the API 
that Apple implemented.


> If we would go for round rect (RR), we need the obility to create RR 
> paths and the ability to create each "corner" different - specify x and 
> y radiuses for every "corner"

That's relatively easy to do as well:

  function roundRect(c, x, y, w, h, r1, r2, r3, r4) {
    // assumes that r1..r4 are in range
    c.beginPath();
    c.moveTo(x+w/2, y);
    c.arcTo(x+w, y,   x+w,   y+h/2, r1);
    c.arcTo(x+w, y+h, x+w/2, y+h,   r2);
    c.arcTo(x,   y+h, x,     y+h/2, r3);
    c.arcTo(x,   y,   x+w/2, y,     r4);
    c.closePath();
    c.stroke();
  }

Similarly if you want to do different x and y radii it's relatively easy 
to pass through to the new arcTo() method. (This isn't widely implemented 
yet so I haven't shown an example here.)

-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'