html5 canvas - Draw multiple circles filled with image content -

-

i trying draw circles on canvas filled portions image. imagine clicking on white canvas , user clicked reveal portion of photo.

i have found ways draw 1 circle, can not succeed using draw multiples. if repeat action other coordinates drawing not happening.

function start_drawing(){     ctx.beginpath();     ctx.fillstyle = "rgb(255,255,255)";     ctx.fillrect(0,0,canvas.width,canvas.height);//fill background. color default black     ctx.arc(mouse.x,mouse.y,45,0,6.28,false);//draw circle     ctx.arc(mouse.x+100,mouse.y+100,45,0,6.28,false);     ctx.clip();//call clip method next render clipped in last path     ctx.drawimage(img,0,0);      ctx.closepath(); }

any idea on how can achieved ? thank you.

later edit (the entire exact code used)

<!doctype html> <html> <head> <script>  window.onload=function(){    var canvas = document.getelementbyid('mycanvas');   var ctx=canvas.getcontext('2d');    var mouse={x:0,y:0} //make object hold mouse position  canvas.onmousemove=function(e){mouse={x:e.pagex-this.offsetleft,y:e.pagey-this.offsettop};} //update mouse when canvas moved on  var img=new image();  img.src="bmw_gina.jpg";  setinterval( start_drawing ,100);// set animation motion   ctx.beginpath();  ctx.fillstyle = "rgb(255,255,255)";  ctx.fillrect(0,0,canvas.width,canvas.height);//fill background. color default black   ctx.closepath();  function start_drawing(){  //ctx.save();  ctx.beginpath();                       ctx.arc(mouse.x,mouse.y,45,0,6.28,false);//draw circle                      ctx.clip();//call clip method next render clipped in last path                      ctx.drawimage(img,0,0);    ctx.closepath();  //ctx.restore(); }  }  </script> </head> <body>     <canvas id="mycanvas" width="1003" height="914"></canvas>  </body> </html>

there 2 issues can see yor code:

the first start_drawing clearing canvas every execution. each mouse click (i assume start_drawing called on mouse click) circle drawn canvas cleared before that.

the other need call beginpath , closepath each clipping region want create. code should that:

function start_drawing(){       ctx.fillstyle = "rgb(255,255,255)";      ctx.fillrect(0,0,canvas.width,canvas.height);//fill background. color default black     ctx.beginpath();      ctx.arc(mouse.x,mouse.y,45,0,6.28,false);//draw circle     ctx.clip();//call clip method next render clipped in last path      ctx.closepath();      ctx.drawimage(img,0,0);      ctx.beginpath();      ctx.arc(mouse.x+100,mouse.y+100,45,0,6.28,false);     ctx.clip();//call clip method next render clipped in last path      ctx.closepath();       ctx.drawimage(img2,0,0);   }

update

well apparently, trick reset clipping region reset canvas. can achieved re setting it's width.

there go: http://jsfiddle.net/qcg9n/5/


Comments

Post a Comment

Popular posts from this blog

php - What is the difference between $_SERVER['PATH_INFO'] and $_SERVER['ORIG_PATH_INFO']? -

-
what’s difference between $_server['path_info'] , $_server['orig_path_info'] ? how use them? when run print_r($_server) , path_info , orig_path_info not present in array. why not? how can enable them? i have read php manual on them, still don’t understand them. the path_info variable present if invoke php script this: http://www.example.com/phpinfo.php/hello_there it's /hello_there part after .php script. if don't invoke url that, there won't $_server["path_info"] environment variable. the porig_ prefix uncommon. path_info standard cgi-environment variable, , should never prefixed. did read that? (there issues around php3/php4 if invoked php interpreter via cgi-bin/ - hardly has such setups today.) for reference: http://www.ietf.org/rfc/rfc3875
Read more

fortran - Function return type mismatch -

-
i'm attempting recode old c++ program in fortran make use of lapack (i'm aware c++ have lapack++, i'm having lot of trouble installing it, gave up). i didn't have problems compilation, when had variables declared real . when started coding section of program required lapack, found parameters passed dsyev need double precision . tried change double precision (including changing hard coded numbers double precision counterparts, i.e. 0.0 -> 0.0d0) when try compile, following error of functions , subroutines i've written: error: return type mismatch of function <function> @ (1) (real(4)/real(8)) i'm not sure coming from, in program has been changed double precision. for example, i've declared following: double precision :: alpha(3),d(3),zeta1,zeta2 double precision :: a1(3),a2(3),d1(3),d2(3) double precision :: pi pi = 3.14159265359d0 alpha = (/0.109818d0, 0.405771d0, 2.22766d0/) d = (/0.444635d0, 0.535328d0, 0.154329d0 /) 10 i=1,3 ...
Read more

queue - mq_receive: message too long -

-
i implementing communication between 2 processes using queue. problem when call function mq_receive, error: message long. i have done following: struct mq_attr attr; long size = attr.mq_msgsize; .... // initializing queue "/gateway" int rc = mq_receive(gateway, buffer, size, &prio); if print size value, size=1, while when print same size program (got same mechanism), not long integer ( -1217186280 )... how can solve error?....so while size = 1, believe it's right "message long" why 1? p.s. have tried put : int rc = mq_receive(gateway, buffer, sizeof(buffer), &prio); but no result. it seems need read docs more carefully. when call mq_receive should pass size of destination buffer. this size must greater mq_msgsize attribute of queue . in addition, seems have error in queue attributes initialisation makes proper mq_receive call impossible. here standard message queue session: fill mq_attr struct ( doc ): struct mq_a...
Read more