Using Clip in canvas causing Pixels

Question

I am trying to using context.clip() to clip a draw arc from other one and fill the clipped result. But when i clip section & fill it, it gives pixelated fill .

  var ctx = document.getElementById("canvas").getContext("2d");
  var x = 150 ; 
  var y = 150 ;
  var r = 100 ;

    ctx.save() ;
    ctx.translate(x,y) ;

    ctx.beginPath() ;
    ctx.arc(0,0,r,0,2*Math.PI);
    ctx.closePath() ;
    ctx.fillStyle = "cyan" ;
    ctx.fill() ;
    ctx.lineWidth = 10;
    ctx.stroke();
    ctx.restore() ;

    ctx.save() ;
    ctx.clip() ;
    ctx.translate(x,y);

    ctx.beginPath();
    ctx.moveTo(r,-r-10);
    ctx.arc(0,-r-10,r,0,Math.PI*2);
    ctx.closePath();
    ctx.fillStyle = "#f2f2f2";
    ctx.fill();
    ctx.lineWidth = 1;
    ctx.stroke();
    ctx.restore();

https://jsfiddle.net/x0d0n40z/1/

Answer 1

An alternative approach which eliminates the need for clip()/save()/restore() is to use a few steps of compositing.

Clipping mask is anti-aliased in some browsers while in other not. To obtain consistency (and in some cases also performance since save-clip-restore are relative expensive operations) using composition is preferred if possible.

In this case:

• Fill main arc in target color
• Define a clipping arc
• Change composite mode to destination-out and fill (will cut main)
• Change composite mode to source-atop and stroke (will outline cut)
• Change composite mode to source-over and stroke outline of main circle

Example

Update: Simplified steps (with the last step merged into the process, ref. comments). I also chose to demonstrate use of the Path2D since we can reuse the object without interfering with the path on the ordinary context -

var ctx = c.getContext("2d"),
    p = new Path2D(),          // this will store main shape for reuse
    x = 75, y = 75, radius = 70;

// main arc
p.arc(x, y, radius, 0, 6.28);  // store to path object
ctx.fillStyle = "cyan";
ctx.fill(p);                   // fill path object

// clip top arc
ctx.globalCompositeOperation = "source-atop";
ctx.arc(x, y - radius, radius, 0, 6.28);
ctx.fillStyle = "#09f";
ctx.fill();
ctx.lineWidth = 5;
ctx.stroke();

// stroke main arc
ctx.globalCompositeOperation = "source-over";
ctx.stroke(p);                 // stroke path object

body {background:#e9e9e9}

<canvas id=c></canvas>

Old version:

var ctx = c.getContext("2d"),
    x = 75, y = 75, radius = 70;

// main arc
ctx.arc(x, y, radius, 0, 6.28);
ctx.fillStyle = "cyan";
ctx.fill();

// clipping arc
ctx.beginPath();
ctx.arc(x, y - radius, radius, 0, 6.28);

// cut step
ctx.globalCompositeOperation = "destination-out";
ctx.fill();

// stroke gap step
ctx.globalCompositeOperation = "source-atop";
ctx.lineWidth = 10;
ctx.stroke();

// stroke whole outline
ctx.globalCompositeOperation = "source-over";
ctx.beginPath();
ctx.arc(x, y, radius, 0, 6.28);
ctx.lineWidth = 5;
ctx.stroke();

// if you want to color the clip then use this:
ctx.globalCompositeOperation = "destination-atop";
ctx.fillStyle = "#09f";
ctx.fill();

body {background:#e9e9e9}

<canvas id=c></canvas>

Answer 2

The problem is that the clip boundary is not being anti alised.

To solve you can render the shape without using the clip. The ctx.arc method lets you set the start and end angles so you can get the inset by filling two arcs.

You will need to get the angles where the clip circle and the inset circle intercept.

For this case it is very simple. First get the distance between the circles, and the angle from one to the other. This works only for two circles of same radius.

var c = {x:?,y:?}; // circle one location
var c1 = {x:?,y:?}; // circle two location
var radius = ?; // radius of both
var angle = Math.atan2(c1.y - c.y, c1.x - c.x);  // get the angle from one to the next
var dist = Math.hypot(c1.x - c.x, c1.y - c.y); // get the distance. NOTE IE does not have hypot so do it the normal way with Math.sqrt....

Now you have the angle and distance the intercepts are a simple relationship between the distance and the radius

var iAngle = Math.acos(dist / 2 / radius); // the angle from the line between the circles
                                          // to the intercepts

Now you have that angle you can draw the two arcs

ctx.beginPath();
ctx.arc(c.x,c.y,radius,angle - iAngle , angle + iAngle); // first arc
ctx.arc(c1.x,c1.y, radius, angle + Math.PI - iAngle, angle + Math.PI + iAngle); // second arc
ctx.fill();
ctx.stroke();

There is not much you can do to prevent the jaggies from effecting the clip area. Another way to achieve clipping is to use ctx.globalCompositeOperation to render a mask. You can mask in and out, and many more options. This will be a better solution when the clipping area becomes more complex.

Answer 3

I finally figured the right way to correct the bug . Heres the clean result of what i wanted https://jsfiddle.net/x0d0n40z/6/

Code :

var ctx = document.getElementById("canvas").getContext("2d");
var r = 50    
x = ctx.canvas.width/2;
y = ctx.canvas.height/2;
var offset = 60;

ctx.save();
ctx.setTransform(1,0,0,1.5,x,y);
ctx.beginPath();
ctx.arc(0,0,r,0,2*Math.PI);
ctx.stroke();
ctx.clip();


ctx.beginPath();
ctx.arc(0,0,r,0,2*Math.PI,false);
ctx.fillStyle = "cyan";
ctx.fill();

ctx.setTransform(1, 0, 0, 1, x, y);
ctx.beginPath();
ctx.arc(0,-offset,r,0,2*Math.PI,false);
ctx.fillStyle = "#f2f2f2";
ctx.fill();
ctx.lineWidth = 1 ;
ctx.stroke();

ctx.setTransform(1,0,0,1.5,x,y);
ctx.beginPath();
ctx.arc(0,0,r,0,2*Math.PI,false);
ctx.lineWidth = 3 ;
ctx.stroke();

ctx.restore();

Source from were i learned to use clip : http://www.html5canvastutorials.com/advanced/html5-canvas-clipping-region-tutorial/