{"json_modified": "2016-10-15T16:32:59.676991", "uuid": "da5860aa-f2f0-4cdc-a3b7-a9099134ba4a", "title": "Create the Canvas and draw on it", "url": "/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it", "tags": ["Canvas", "Beginner", "HTML", "Tutorial", "JavaScript", "Games", "2D"], "translations": [{"uuid": "870bb7dc-ae49-487c-8138-df9d0328697c", "title": "\u5efa\u7acbCanvas\u4e26\u756b\u51fa", "url": "/zh-TW/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it", "tags": ["Canvas", "Beginner", "HTML", "Tutorial", "JavaScript", "Games", "2D"], "summary": "\u5728\u958b\u59cb\u64b0\u5beb\u904a\u6232\u529f\u80fd\u4e4b\u524d\uff0c\u6211\u5011\u5148\u5efa\u69cb\u5728\u904a\u6232\u4e2d\u8ca0\u8cac\u6e32\u67d3\u7684\u57fa\u790e\u7d50\u69cb\u3002\u6e32\u67d3\u53ef\u900f\u904eHTML\u7684<a href=\"/zh-TW/docs/Web/HTML/Element/canvas\" title=\"This article hasn't been written yet. Please consider contributing!\"><code>&lt;canvas&gt;</code></a> \u5143\u4ef6\u5b8c\u6210\u3002", "localization_tags": [], "locale": "zh-TW", "last_edit": "2015-09-21T14:52:17", "review_tags": []}], "modified": "2016-10-15T16:32:59", "label": "Create the Canvas and draw on it", "localization_tags": [], "locale": "en-US", "id": 146823, "last_edit": "2016-10-15T16:32:54", "summary": "Before we can start writing the game's functionality, we need to create a basic structure to render the game inside. This can be done using HTML and the <a href=\"/en-US/docs/Web/HTML/Element/canvas\" title=\"The HTML &lt;canvas&gt; Element can be used to draw graphics via scripting (usually JavaScript). For example, it can be used to draw graphs, make photo compositions or even perform animations. You may (and should) provide alternate content inside the &lt;canvas&gt; block. That content will be rendered both on older browsers that don't support canvas and in browsers with JavaScript disabled.\"><code>&lt;canvas&gt;</code></a> element.", "sections": [{"id": "Subnav", "title": "Subnav"}, {"id": "The_game's_HTML", "title": "The game's HTML"}, {"id": "Canvas_basics", "title": "Canvas basics"}, {"id": "Compare_your_code", "title": "Compare your code"}, {"id": "Next_steps", "title": "Next steps"}], "slug": "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it", "review_tags": ["technical"]}