clipping - How can I clip INSIDE a shape in HTML5 canvas? -

-

i've found number of examples clipping outside region of arc (e.g.: this example). can't seem figure out how clip inside arc shape instead.

here example of how i'm clipping outside region, opposite of want:

ctx.save();  ctx.beginpath(); ctx.arc(x, y, radius, 0, math.pi * 2, false); ctx.clip();  ctx.beginpath(); ctx.linewidth     = 1; ctx.shadowblur    = 10; ctx.shadowoffsetx = shadowoffset; ctx.shadowcolor   = '#000000'; ctx.strokestyle   = '#000000'; ctx.arc(x, y, radius, 0, math.pi * 2, false); ctx.stroke();  ctx.restore();

available options

for irregular shapes can use 2 techniques:

  1. composite mode
  2. clipping

imho better choice use actual clipping mode or composite mode destination-out.

as marke says in answer xor available too, xor inverts alpha pixels , doesn't remove rgb pixels. works solid images no transparency, have existing pixels transparency these might give opposite effect (becoming visible) or if later use xor mode else drawn on top "clipped" area show again.

clipping

by using clipping can use clearrect clear area defined path.

example:

/// save context clipping ctx.save();  /// create path ctx.beginpath(); ctx.arc(x, y, radius, 0, 2 * math.pi); ctx.closepath();  /// set clipping mask based on shape ctx.clip();  /// clear inside ctx.clearrect(0, 0, offset, offset);  /// remove clipping mask ctx.restore();

online demo clipping

source image: image has partial semi-transparent pixels , full transparent white background comes through -

source image

result:

we punched hole in , background shows through:

clipping

composite mode: destination-out

using composite mode destination-out clear pixels clipping:

ctx.beginpath(); ctx.arc(offset * 0.5, offset * 0.5, offset * 0.3, 0, 2 * math.pi); ctx.closepath();  /// set composite mode ctx.globalcompositeoperation = 'destination-out'; ctx.fill();  /// reset composite mode default ctx.globalcompositeoperation = 'source-over';

online demo composite mode:

result:

destination out

same clipping destination-out removes pixels.

composite mode: xor

using xor in case there exists transparent pixels (see online example here):

xor mode

only alpha values inverted. don't have solid pixels alpha won't go 255 0 (255 - 255) 255 - actual value result in non-cleared background using mode.

(if draw second time same mode "removed" pixels restored can utilized in other ways).


Comments

Post a Comment

Popular posts from this blog

c# - How Configure Devart dotConnect for SQLite Code First? -

-
can configure following sample code ? when run following code, error : no entity framework provider found ado.net provider invariant name 'devart.data.sqlite' setting in machine.config <system.data> <dbproviderfactories> <add name="dotconnect sqlite" invariant="devart.data.sqlite" description="devart dotconnect sqlite" type="devart.data.sqlite.sqliteproviderfactory, devart.data.sqlite, version=4.6.287.0, culture=neutral, publickeytoken=09af7300eec23701" /> </dbproviderfactories> </system.data> after add below block code in app.config <?xml version="1.0"?> <configuration>   <configsections> <!-- more information on entity framework configuration, visit http://go.microsoft.com/fwlink/?linkid=237468 --> <section name="entityframework" type="system.data.entity.internal.configfile.entityframeworksection, entit...
Read more

java - Copying object fields -

-
what best way of copying classes when need have 2 independent variables? have simple class: public class myclass { boolean = false; string b= "not empty"; } do need make method : assign(myclass data ) { a= data.a; b= data.b; } is there automatic method copy (duplicate) objects in java? do need make method : pretty close. instead of making method, should make constructor. such constructors called copy constructor , , create them this: myclass(myclass data) { = data.a; b = data.b; } and create copy of instance, use constructor this: myclass obj1 = new myclass(); myclass obj2 = new myclass(obj1); copy constructor can tedious : using copy constructor create deep-copy can tedious, when class has mutable fields. in case, assignment create copy of reference, , not object itself. have create copy of fields (if want deep copy). can go recursive. a better way create deep copy serialize , deserialize object. why not use clone()? ...
Read more

c++ - Clear the memory after returning a vector in a function -

-
i have function processes , stores lot of data in , returns results vector of class. amount of data stored in function tremendous , want clear storage memory of function after finished job. necessary (does function automatically clear memory) or should clear memory function? update: vector<customers> process(char* const *filename, vector<int> id) { vector<customers> list_of_customers; (perform actions) return list_of_customers; } variables defined locally within function automatically released @ end of function scope. destructors objects called, should free memory allocated objects (if objects coded correctly). example of such object std::vector . anything you've allocated new must have corresponding delete release storage. try avoid doing own allocation , use raii instead, i.e. containers or smart pointers.
Read more