{"json_modified": "2016-09-04T07:27:41.648957", "uuid": "f4094fec-335d-44d6-be43-b484cea7773a", "title": "Compositing and clipping", "url": "/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing", "tags": ["Canvas", "HTML5", "Graphics", "HTML", "Tutorial", "Intermediate"], "translations": [{"uuid": "54a55ec6-f428-490c-8fb3-5edb6f3ae77e", "title": "\u5408\u6210\u3068\u30af\u30ea\u30c3\u30d4\u30f3\u30b0", "url": "/ja/docs/Web/API/Canvas_API/Tutorial/Compositing", "tags": ["Canvas", "HTML5", "Graphics", "HTML", "Tutorial", "Intermediate", "canvas"], "summary": "\u65b0\u3057\u3044\u56f3\u5f62\u3092\u65e2\u5b58\u306e\u56f3\u5f62\u306e\u5f8c\u308d\u306b\u63cf\u304f\u3060\u3051\u3067\u306a\u304f\u3001\u7279\u5b9a\u306e\u9818\u57df\u3092\u8986\u3046\u3001\u4e00\u90e8\u5206\u3092 canvas \u304b\u3089\u6d88\u53bb\u3059\u308b (<a href=\"/ja/docs/Web/API/CanvasRenderingContext2D/clearRect\" title=\"CanvasRenderingContext2D.clearRect() &#x306F;&#x3001;&#x5EA7;&#x6A19;(x, y)&#x3092;&#x59CB;&#x70B9;&#x3068;&#x3059;&#x308B;&#x5927;&#x304D;&#x3055;(width, height)&#x306E;&#x9818;&#x57DF;&#x3092;&#x3001;&#x900F;&#x660E;&#x8272;&#xFF08;&#x900F;&#x660E;&#x306A;&#x9ED2;&#xFF09;&#x3067;&#x5857;&#x308A;&#x3064;&#x3076;&#x3057;&#x307E;&#x3059;&#x3002;&#10; &#x9818;&#x57DF;&#x5185;&#x306B;&#x63CF;&#x753B;&#x3055;&#x308C;&#x3066;&#x3044;&#x305F;&#x3059;&#x3079;&#x3066;&#x306E;&#x30B3;&#x30F3;&#x30C6;&#x30F3;&#x30C4;&#x306F;&#x6D88;&#x53BB;&#x3055;&#x308C;&#x307E;&#x3059;&#x3002;\"><code>clearRect()</code></a> \u30e1\u30bd\u30c3\u30c9\u306e\u3088\u3046\u306b\u77e9\u5f62\u306b\u9650\u5b9a\u3055\u308c\u307e\u305b\u3093) \u306a\u3069\u304c\u53ef\u80fd\u3067\u3059\u3002", "localization_tags": [], "locale": "ja", "last_edit": "2016-09-04T07:27:37", "review_tags": []}, {"uuid": "7e6ace32-c456-4bac-bbd6-8c81b39f3d03", "title": "\ub3c4\ud615 \ud569\uc131", "url": "/ko/docs/Web/HTML/Canvas/Tutorial/Compositing", "tags": ["\uce94\ubc84\uc2a4", "\uadf8\ub798\ud53d", "HTML5"], "summary": "\uc774\uc804 \ud398\uc774\uc9c0\ub4e4\uc5d0\uc11c \ub098\uc628 \ubaa8\ub4e0 \uc608\uc81c\uc5d0\uc11c, \uc0c8\ub85c \uadf8\ub9ac\ub294 \ub3c4\ud615\uc740 \uc5b8\uc81c\ub098 \uc774\ubbf8 \uadf8\ub824\uc9c4 \ub3c4\ud615\uc758 \uc704\uc5d0 \uadf8\ub824\uc84c\uc2b5\ub2c8\ub2e4. \ub300\ubd80\ubd84\uc758 \uc0c1\ud669\uc5d0\uc11c\ub294 \uc774\ub807\uac8c \ud558\ub294 \uac83\uc774 \uc801\uc808\ud558\uc9c0\ub9cc, \ub3c4\ud615\uc744 \ud569\uc131\ud558\uae30 \uc704\ud55c \uc21c\uc11c\ub97c \uc81c\ud55c\ud558\uac8c \ub418\ub294\ub370, \u00a0<code>globalCompositeOperation</code> \uc18d\uc131\uc744 \uc124\uc815\ud568\uc73c\ub85c\uc368 \uc774\ub7ec\ud55c \uc0c1\ud0dc\ub97c \ubc14\uafc0 \uc218 \uc788\uc2b5\ub2c8\ub2e4.", "localization_tags": [], "locale": "ko", "last_edit": "2014-10-05T18:15:02", "review_tags": []}, {"uuid": "4c215a04-7566-4dd7-8ed9-9de5a15619f3", "title": "\u7ec4\u5408 Compositing", "url": "/zh-CN/docs/Web/API/Canvas_API/Tutorial/Compositing", "tags": ["Canvas"], "summary": "In all of our previous examples, shapes were always drawn one on top of the other. This is more than adequate for most situations. This, for instance, limits in what order composite shapes are built up. We can however change this behaviour by setting the <code>globalCompositeOperation</code> property.", "localization_tags": [], "locale": "zh-CN", "last_edit": "2015-09-06T04:14:56", "review_tags": []}, {"uuid": "11d9e839-0e5b-43fa-b7a1-cf9631c02836", "title": "\u5408\u6210\u6548\u679c", "url": "/zh-TW/docs/Web/API/Canvas_API/Tutorial/Compositing", "tags": [], "summary": "\u5728\u524d\u8ff0\u7684\u7bc4\u4f8b\u4e2d\uff0c\u65b0\u7e6a\u88fd\u7684\u5716\u5f62\u7e3d\u6703\u8986\u84cb\u5728\u4e4b\u524d\u7684\u5716\u5f62\u4e0a\uff0c\u5c0d\u5927\u591a\u6578\u60c5\u6cc1\u4f86\u8aaa\u9019\u76f8\u7576\u6b63\u5e38\uff0c\u4e0d\u904e\u5b83\u4e5f\u9650\u5236\u4e86\u5716\u5f62\u7e6a\u88fd\u7684\u9806\u5e8f\u3002\u5176\u5be6\u6211\u5011\u53ef\u4ee5\u900f\u904e globalCompositeOperation \u5c6c\u6027\u4f86\u6539\u8b8a\u9019\u9805\u9810\u8a2d\u884c\u70ba\u3002", "localization_tags": [], "locale": "zh-TW", "last_edit": "2016-07-06T08:22:59", "review_tags": []}], "modified": "2016-02-03T17:33:52", "label": "Compositing and clipping", "localization_tags": [], "locale": "en-US", "id": 79253, "last_edit": "2016-02-03T17:33:49", "summary": "We can not only draw new shapes behind existing shapes but we can also use it to mask off certain areas, clear sections from the canvas (not limited to rectangles like the <a href=\"/en-US/docs/Web/API/CanvasRenderingContext2D/clearRect\" title=\"The CanvasRenderingContext2D.clearRect() method of the Canvas 2D API sets all pixels in the rectangle defined by starting point&#xA0;(x, y)&#xA0;and size (width, height)&#xA0;to transparent black, erasing any previously drawn content.\"><code>clearRect()</code></a> method does) and more.", "sections": [{"id": "Quick_Links", "title": null}, {"id": "globalCompositeOperation", "title": null}, {"id": "Clipping_paths", "title": "Clipping paths"}, {"id": "A_clip_example", "title": "A "}], "slug": "Web/API/Canvas_API/Tutorial/Compositing", "review_tags": []}