How to Anti-Alias Clip() Edges in HTML5 Canvas Under Chrome Windows

Can I turn off antialiasing on an HTML <canvas> element?

For images there's now context.imageSmoothingEnabled= false.

However, there's nothing that explicitly controls line drawing. You may need to draw your own lines (the hard way) using getImageData and putImageData.

How to clip canvas with CSS clip-path?

The clip-path is relative new and could be prone to errors (didn't work for me in Aurora).

For a stable result I would suggest just using canvas' clip() method (you don't need composite for this).

You can provide the points in this way (here percentages):

var path = [50, 33, 75, 10, 80, 80, 60, 75, 40, 60, 20, 10, 40, 20, 50, 33];

Almost as easy as defining in CSS. Then have a function to parse it:

function addClip(context, path) {

    var w = context.canvas.width,
        h = context.canvas.height;

    context.beginPath();
    context.moveTo(path[0] * w / 100, path[1] * h / 100);
    for(var i = 2; i < path.length; i+=2) {
        context.lineTo(path[i] * w / 100, path[i+1] * h / 100);
    }
    context.closePath();
    context.clip();
}

Result:

DEMO HERE

(The clip is set before the drawing operations take place).

Just put your drawing operations in a function which you can call when window is re-sized as well (shown in demo above).

Update

As to anti-alias: there is actually applied anti-alias to the image but because of the red color it can be hard to detect it depending on type of screen and perhaps browser. An enlarged version:

Canvas Circles Draw Inconsistently

You will need to redraw the background every time.

function drawBg() {
    context.fillStyle = "white";
    context.fillRect(0, 0, canvas.width, canvas.height);
}

drawBg();
context.beginPath();
context.arc(100, 100, 40, 0, 2 * Math.PI);
context.strokeStyle = "black";
context.stroke();

drawBg();
context.beginPath();
context.arc(100, 100, 40, 0, 2 * Math.PI);
context.strokeStyle = "white";
context.stroke();

I did some research into this phenomenon. I think the cause is anti-aliasing.

1. Can I turn off antialiasing on an HTML <canvas> element?
2. How to anti-alias clip() edges in html5 canvas under Chrome Windows?

It seems you can't draw pixel-perfect hard-edged circles on the html canvas with arc() and vector graphics.

HTML5 Canvas - Fill circle with image

I did this the other day for a big thing I'm making;

var thumbImg = document.createElement('img');

thumbImg.src = 'path_to_image';
thumbImg.onload = function() {
    tmpCtx.save();
    tmpCtx.beginPath();
    tmpCtx.arc(25, 25, 25, 0, Math.PI * 2, true);
    tmpCtx.closePath();
    tmpCtx.clip();

    tmpCtx.drawImage(thumbImg, 0, 0, 50, 50);

    tmpCtx.beginPath();
    tmpCtx.arc(0, 0, 25, 0, Math.PI * 2, true);
    tmpCtx.clip();
    tmpCtx.closePath();
    tmpCtx.restore();
};

Worked perfect for me.

Here's a more complex version of it that I made which does image caching too, https://jsfiddle.net/jaredwilli/ex5n5/

css transform, jagged edges in chrome

In case anyone's searching for this later on, a nice trick to get rid of those jagged edges on CSS transformations in Chrome is to add the CSS property -webkit-backface-visibility with a value of hidden. In my own tests, this has completely smoothed them out.

-webkit-backface-visibility: hidden;

How to render svg elements with crisp edges while still keeping anti-aliasing?

Perhaps you set shape-rendering property for root svg element.

You should set shape-rendering property for each shape elements, like this.

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" width="150" height="20" shape-rendering="crispEdges" 
        fill="none" stroke="black"/>
    <path d="M80,30l100,100" shape-rendering="optimizeQuality" 
        stroke="black" stroke-width="5"/>
</svg>

---

Related Topics