CODEWITHSUNDEEP
javascripthtml5-canvassmoothing
gunslingor
gunslingor

Reputation: 1486

How do I draw an Oval on an HTML Canvas that comes out smoother than this one?

Here is a picture of the widget I made:

enter image description here

Here is the main function that calls all the primitive shapes:

function cylinder(ctx, w, h, fill_percent){
    y_origin = h;
    x_origin = 0;
    drawContainerBottom(ctx, x_origin, y_origin, w, h);
    drawContentBottom(ctx, x_origin, y_origin, w, h);
    drawContentFront(ctx, x_origin, y_origin, w, h, fill_percent);
    drawContentTop(ctx, x_origin, y_origin, w, h, fill_percent);
    drawContainerFront(ctx, x_origin, y_origin, w, h);
    drawContainerTop(ctx, x_origin, y_origin, w, h);
}

Here is the function to draw the top of the outer container, the main one that looks bad:

function drawContentTop(ctx, x, y, w, h, fill_percent){
    Contents_offset=5;
    w=w-2*Contents_offset;
    x=x+Contents_offset;
    h=h;
    y=y-h+Contents_offset+(h-w/4-2*Contents_offset)*(1-fill_percent);
    var i; 
    var xPos; 
    var yPos; 
    var twoPi = 2 * Math.PI;
    ctx.beginPath();

    //Top
    for (i = 0; i < twoPi; i += 0.001) {
        xPos = (x + w / 2) - (w / 2 * Math.cos(i));
        yPos = (y + w / 8) + (w / 8 * Math.sin(i));

        if (i === 0) {
            ctx.moveTo(xPos, yPos);
        } else {
            ctx.lineTo(xPos, yPos);
        }
    }

    ctx.fillStyle="rgba(0, 99, 188, .5)";
    ctx.fill();
    ctx.strokeStyle="rgba(0, 99, 188, 1)";
    ctx.stroke();
};

And here is how I call it:

<canvas name='pool_graphic' class='pool_graphic' width='125' height='125' style='padding:10px'></canvas><br />
<canvas name='pool_graphic' class='pool_graphic' width='125' height='125' style='padding:10px'></canvas><br />
<script>
    $("td canvas[name='pool_graphic']").each(function(){
        var ctx = this.getContext('2d');
        var padding = this.style.padding.replace(/[^0-9]+/, '');
        var w=this.width
        var h=this.height;
        var fill_percent=1;
        cylinder(ctx, w, h, fill_percent);

    });
</script>

Firstly, why is it only the top and bottom of the outside container that looks bad when I am using the same manual type loop in all cases? Secondly, how do I fix the jaggedness?

EDIT: Just kept tweeking using the techniques discussed and here is what I got

enter image description here

Upvotes: 3

Views: 348

Answers (1)

markE
markE

Reputation: 105035

Agreed, Curves are always prone to jaggies.

Perhaps experiment with scaling the Y of a circle?

enter image description here

Example code and a Demo:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

ctx.fillRect(0,0,cw,ch);

oval(150,150,75,.38);

function oval(cx,cy,radius,percentY){
  // draw thrice with slight offset to fill a few jaggies
  drawOval(cx,cy,radius,percentY);
  drawOval(cx,cy+0.50,radius,percentY);
  drawOval(cx+0.50,cy+0.75,radius,percentY);
}

function drawOval(cx,cy,radius,percentY){
  ctx.beginPath();
  ctx.translate(cx,cy);
  ctx.scale(1,percentY);
  ctx.arc(0,0,radius,0,Math.PI*2);
  ctx.lineWidth=1;
  ctx.strokeStyle='gainsboro';
  ctx.stroke();
  ctx.stroke();
  ctx.setTransform(1,0,0,1,0,0);
}
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
<canvas id="canvas" width=300 height=300></canvas>

Upvotes: 1

Related Questions