! you can do it ! by doing post-processing :
yes, but no : on Chrome at least, 'destination-in' does not
match the specifications : the source is used to compute destination
color, so we cannot have single color from a shaded one.
( i did a try on JSBin : http://jsbin.com/ecipiq/4/ )
2) Using getImageData and performance Array :
draw border in a temp canvas
getImageData of the canvas
get a Uint32Array or Uint8Array view on underlying data
loop linearly within array : if value > threshold set it to border color
draw the fill of the ellipse on target canvas
Second one does not require globalCompositeOperation to work.
But on most browsers (all ?) get/put ImageData are slow as hell, this fact
alone might invalidate this solution.
The nice thing is you can precisely decide how to un-antialias.
Other StackOverflow members might have insight on all this.
Any of those solution will be much faster than a hand-written non-aliased
Remarks to get you started faster :
You can get a UInt32Array view on your ImageData with :
then sourceBuffer32[i] contains Red, Green, Blue, and transparency packed into one
unsigned 32 bit int. Compare it to 0 to know if pixel is non-black ( != (0,0,0,0) )
OR you can be more precise with a Uint8Array view :
var myGetImageData = myTempCanvas.getImageData(0,0,sizeX, sizeY);
sourceBuffer8 = new Uint8Array(myGetImageData.data.buffer);
If you deal only with shades of grey, then R=G=B, so watch for
and you can set the i-th pixel to black in one time using the UInt32Array view :
You'll surely be able to figure out how to deal with other colors than grey/black out of this example.