javascript - Make canvas object's drawn path transperant? -
need help code. there bluish square (it supposed be,) it's path bluish too!
class="snippet-code-css lang-css prettyprint-override">body{ overflow-y:hidden; overflow-x:hidden; } canvas{ background:url("https://img0.etsystatic.com/038/0/6965312/il_340x270.545626074_sflg.jpg"); } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body onkeydown="move(event.keycode)"> <script> var x = 80; var y = 20; function move(keycode){ mycanvas.fillstyle = "transperant"; mycanvas.fillrect(x, y, 50, 50); if(keycode == 39){ x += 5; } if(keycode == 37){ x -= 5; } if(keycode == 40){ y += 5; } if(keycode == 38){ y -= 5; } mycanvas.fillstyle = "blue"; mycanvas.fillrect(x, y, 50,50); } </script> <canvas id="c1" width="900px" height="900px">uhh, what?!?!</canvas> <script> myelement = document.getelementbyid("c1"); mycanvas = myelement.getcontext("2d"); mycanvas.fillstyle = "transperant"; mycanvas.fillrect(80, 20, 50, 50); </script> </body>
how create path transperant/clear? tried fillpath, didn't work. maybe using wrong. please give me help? please include source/example. time , appreciation in advanced!
use compositing create new drawings "erase" existing pixels.
the compositing mode "erases" destination-out
example code:
// set compositing utilize new drawings // "erase" existing drawings ctx.globalcompositeoperation='destination-out'; // draw // canvas become transparent within drawing ctx.fillrect(100,100,100,100); // reset compositing default ctx.globalcompositeoperation='source-over'; example code , demo:
class="snippet-code-js lang-js prettyprint-override">var canvas=document.getelementbyid("canvas"); var ctx=canvas.getcontext("2d"); var cw=canvas.width; var ch=canvas.height; var img=new image(); img.onload=start; img.src="https://img0.etsystatic.com/038/0/6965312/il_340x270.545626074_sflg.jpg"; function start(){ canvas.width=img.width; canvas.height=img.height; ctx.drawimage(img,0,0); // set compositing utilize new drawings // "erase" existing drawings ctx.globalcompositeoperation='destination-out'; // draw // canvas become transparent within drawing ctx.fillrect(100,100,100,100); // reset compositing default ctx.globalcompositeoperation='source-over'; } class="snippet-code-css lang-css prettyprint-override">body{ background-color: purple; } canvas{border:1px solid red;} class="snippet-code-html lang-html prettyprint-override"><canvas id="canvas" width=300 height=300></canvas>
javascript canvas path clear fill
No comments:
Post a Comment