{"id":134,"date":"2008-12-25T00:00:29","date_gmt":"2008-12-25T07:00:29","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=421"},"modified":"2008-12-25T00:00:29","modified_gmt":"2008-12-25T07:00:29","slug":"transparent-eraser","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=134","title":{"rendered":"Transparent copyPixels()"},"content":{"rendered":"<pre class=\"brush: as3; title: ; notranslate\" title=\"\">\r\nvar canvas:BitmapData=new BitmapData(400,400,true,0x000000);\r\nvar eraser:BitmapData=new BitmapData(400,400,true,0x00000000);\r\naddChild(new Bitmap(canvas));\r\nvar redOval:Shape = new Shape();\r\nwith(redOval.graphics) lineStyle(0,0), beginFill(0xFF0000), drawEllipse(0,0,10,50);\r\n\r\n\/\/ draw a background to emphasize transparency \r\ncreateBackground();\r\n\r\naddEventListener(Event.ENTER_FRAME, onLoop);\r\n\r\nfunction onLoop(evt:Event):void {\r\n\t\/\/ clear canvas so that it is completely transparent\r\n\tcanvas.copyPixels(eraser, eraser.rect, new Point(0,0), eraser);\r\n\tredOval.x = mouseX;\r\n\tredOval.y = mouseY;\r\n\tredOval.rotation += 10\r\n\t\/\/ transform.matrix contains all transformation information for\r\n\t\/\/ the redOval including scaleX, scaleY, x, y, rotation etc...\r\n\tcanvas.draw(redOval, redOval.transform.matrix);\r\n}\r\n\r\nfunction createBackground():void {\r\n\tfor (var i:int = 0; i&lt;100; i++){\r\n\t\twith(graphics) lineStyle(0,0x000000), lineTo(Math.random()*400, Math.random()*400);\r\n\t}\r\n}\r\n<\/pre>\n<p>This example builds on yesterdays snippet. Instead of just allowing the red oval to be continuously drawn to the canvas BitmapData&#8230; in this example the canvas BitmapData is erased again and again before the red oval is drawn to it. To erase it with a flat color you might use BitmapData.fillRect() but if you want to erase it so that it is completely transparent you need to use BitmapData.copyPixels():<\/p>\n<pre class=\"brush: as3; title: ; notranslate\" title=\"\">\r\ncanvas.copyPixels(eraser, eraser.rect, new Point(0,0), eraser);\r\n<\/pre>\n<p>The eraser BitmapData is a completely transparent BitmapData object. The key here is the fourth argument&#8230;. &#8220;alphaBitmapData&#8221;.This is what causes the canvas BitmapData to become completely transparent again at the beginning of each enterFrame.<\/p>\n<p>This argument is separate from the first argument (sourceBitmapData) for added flexibility.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>var canvas:BitmapData=new BitmapData(400,400,true,0x000000); var eraser:BitmapData=new BitmapData(400,400,true,0x00000000); addChild(new Bitmap(canvas)); var redOval:Shape = new Shape(); with(redOval.graphics) lineStyle(0,0), beginFill(0xFF0000), drawEllipse(0,0,10,50); \/\/ draw a background to emphasize transparency createBackground(); addEventListener(Event.ENTER_FRAME, onLoop); function onLoop(evt:Event):void { \/\/ clear canvas so that it is completely transparent canvas.copyPixels(eraser, eraser.rect, new Point(0,0), eraser); redOval.x = mouseX; redOval.y = mouseY; redOval.rotation += 10 \/\/ transform.matrix [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,25],"tags":[99,4],"class_list":["post-134","post","type-post","status-publish","format-standard","hentry","category-bitmapdata","category-pixel-manipulation","tag-actionsnippet","tag-flash"],"_links":{"self":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/134","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=134"}],"version-history":[{"count":0,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/134\/revisions"}],"wp:attachment":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}