{"json_modified": "2016-10-22T04:11:37.940443", "uuid": "6fbf84ae-79f3-435d-be0f-e75ee9fe9992", "title": "Drawing shapes with canvas", "url": "/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes", "tags": ["Canvas", "HTML5", "Graphics", "HTML", "Tutorial", "HTML Canvas", "Intermediate"], "translations": [{"uuid": "3d0ac442-9779-4fbd-9f27-be40f6386ca8", "title": "Kreslen\u00ed tvar\u016f", "url": "/cs/docs/Canvas_tutori%C3%A1l/Kreslen%C3%AD_tvar%C5%AF", "tags": ["Canvas tutorial"], "summary": "", "localization_tags": [], "locale": "cs", "last_edit": "2014-05-24T09:17:28", "review_tags": []}, {"uuid": "4f568392-5fbd-4288-bfed-d4d22c9c476e", "title": "Formen zeichnen mit Canvas", "url": "/de/docs/Web/Guide/HTML/Canvas_Tutorial/Formen_zeichnen", "tags": [], "summary": "<img alt=\"\" class=\"internal\" src=\"https://mdn.mozillademos.org/files/224/Canvas_default_grid.png\" style=\"float: right; height: 220px; width: 220px;\"/>Das canvas ist als Koordinatensystem aufgebaut. In der linken oberen Ecke ist der Punkt (0, 0). Die linke obere Ecke des blauen Quadrates hat die Koordinaten (x, y) <em>siehe Grafik.</em>", "localization_tags": ["inprogress"], "locale": "de", "last_edit": "2015-12-19T05:23:08", "review_tags": []}, {"uuid": "496c373f-6195-42af-a1b5-a5d27008941c", "title": "Dibujando formas con  canvas", "url": "/es/docs/Web/Guide/HTML/Canvas_tutorial/Dibujando_formas", "tags": [], "summary": "<img alt=\"\" class=\"internal\" src=\"https://mdn.mozillademos.org/files/224/Canvas_default_grid.png\" style=\"float: right; height: 220px; width: 220px;\"/>Antes de que podamos empezar a dibujar, necesitamos hablar sobre la cuadr\u00edcula del canvas o el\u00a0<strong>espacio de coordenadas</strong>. La plantilla HTML de\u00a0la p\u00e1gina anterior ten\u00eda un elemento canvas con un 'height' y un 'width' de 150 p\u00edxeles. A la derecha, puedes ver este canvas con la cuadr\u00edcula por defecto superpuesta. Normalmente una unidad en la cuadr\u00edcula corresponde a un p\u00edxel en el elemento canvas. El origen de esta cuadr\u00edcula est\u00e1\u00a0posicionado en la esquina superior izquierda (coordenada (0,0)). Todos los elementos estan posicionados de manera relativa a este punto, as\u00ed que la posici\u00f3n de la esquina superior izquierda del cuadrado azul es de 'x' pixeles desde la izquierda y 'y' pixeles desde arriba (coordenada (x,y)). Mas tarde en este tutorial veremos como trasladar el punto de origen a una posicion diferente, girar la cuadr\u00edcula e incluso darle una escala diferente. Por ahora nos dedicaremos a lo mas com\u00fan.", "localization_tags": ["inprogress"], "locale": "es", "last_edit": "2016-01-25T04:45:31", "review_tags": []}, {"uuid": "0c335f3c-aa8e-452d-a514-0afdf7e7fb73", "title": "Formes g\u00e9om\u00e9triques", "url": "/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques", "tags": ["Canvas", "Guide", "Interm\u00e9diaire", "NeedsLiveSamples", "HTML", "HTML5", "Tutoriel", "Canevas", "Graphisme"], "summary": "<img alt=\"\" class=\"internal\" src=\"https://mdn.mozillademos.org/files/224/Canvas_default_grid.png\" style=\"float: right; height: 220px; width: 220px;\"/>Avant de commencer \u00e0 dessiner, il faut comprendre le <strong>syst\u00e8me de coordonn\u00e9es</strong> du canvas. Le mod\u00e8le basique de la page pr\u00e9c\u00e9dente avait un \u00e9l\u00e9ment canvas large et haut de 150 pixels. \u00c0 la droite, il y a un canvas avec la grille de coordonn\u00e9es par d\u00e9faut superpos\u00e9e. Normalement, 1 unit\u00e9 dans la grille correspond \u00e0 1 pixel sur le canvas. L'origine de cette grille est positionn\u00e9 dans le coin en haut \u00e0 gauche (coordonn\u00e9e (0,0)). Tous les \u00e9l\u00e9ments sont plac\u00e9s relativement \u00e0 l'origine, alors le coin en haut \u00e0 gauche du carr\u00e9 bleu est <code>x</code> pixles \u00e0 partir de la gauche et <code>y</code> pixels \u00e0 partir du haut (coordonn\u00e9es (x,y)). Plus tard dans ce tutoriel, nous verrons comment changer la position de l'origine, pivoter la grille ou m\u00eame la graduer. Pour l'instant, nous alons nous en tenir au syst\u00e8me de coordonn\u00e9e par d\u00e9faut.", "localization_tags": ["inprogress"], "locale": "fr", "last_edit": "2016-10-17T12:07:45", "review_tags": []}, {"uuid": "4042540b-dc2c-4934-824a-55c0ef253ac6", "title": "canvas \u306b\u56f3\u5f62\u3092\u63cf\u304f", "url": "/ja/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes", "tags": ["Canvas", "HTML5", "Graphics", "HTML", "Tutorial", "HTML Canvas", "Intermediate"], "summary": "<img src=\"https://mdn.mozillademos.org/files/224/Canvas_default_grid.png\" style=\"float: right; height: 220px; width: 220px;\"/>", "localization_tags": [], "locale": "ja", "last_edit": "2016-08-27T22:01:28", "review_tags": []}, {"uuid": "757ae764-d065-48bb-8765-f1bf097cf5d4", "title": "Drawing shapes", "url": "/ko/docs/Canvas_tutorial/Drawing_shapes", "tags": ["Tutorials", "HTML:Canvas", "Canvas tutorial"], "summary": "<img style=\"float: right;\"/> \uadf8\ub9ac\uae30\ub97c \uc2dc\uc791\ud558\uae30 \uc804\uc5d0 \uce94\ubc84\uc2a4 \uaca9\uc790 \ub610\ub294<em>\uc88c\ud45c \uacf5\uac04</em> \uc5d0 \ub300\ud574 \uc598\uae30\ud560 \ud544\uc694\uac00 \uc788\uaca0\uc2b5\ub2c8\ub2e4. \uc774\uc804 \ud398\uc774\uc9c0\uc758 HTML \ud15c\ud50c\ub9bf\uc740 \ub108\ube44\uc640 \ub192\uc774\uac00 \uac01\uac01 150\ud53d\uc140\uc778 \uce94\ubc84\uc2a4 \uc5d8\ub9ac\uba3c\ud2b8\uac00 \ub4e4\uc5b4 \uc788\uc5c8\uc2b5\ub2c8\ub2e4. \uc774 \uc774\ubbf8\uc9c0\uc5d0 \uc81c\uac00 \uae30\ubcf8 \uaca9\uc790\ub97c \uacb9\uccd0 \uadf8\ub824 \ubd24\uc2b5\ub2c8\ub2e4. \ubcf4\ud1b5 \uaca9\uc790\uc758 \ud55c \ub2e8\uc704\ub294 \uce94\ubc84\uc2a4\uc758 1\ud53d\uc140\uc5d0 \ud574\ub2f9\ud569\ub2c8\ub2e4. \uc774 \uaca9\uc790\uc758 \uc6d0\uc810\uc740 \uc67c\ucabd \uc704 \uaf2d\uc9c0\uc810(\uc88c\ud45c (0,0))\uc5d0 \uc788\uc2b5\ub2c8\ub2e4. \ubaa8\ub4e0 \uc694\uc18c\ub4e4\uc740 \uc774 \uc6d0\uc810\uc744 \uae30\uc900\uc73c\ub85c \uc0c1\ub300\uc801\uc778 \uc704\uce58\uc5d0 \ub193\uc785\ub2c8\ub2e4. \ub530\ub77c\uc11c \ud30c\ub780 \uc815\uc0ac\uac01\ud615\uc758 \uc67c\ucabd \uc704 \uaf2d\uc9c0\uc810\uc740 \uc67c\ucabd\uc73c\ub85c\ubd80\ud130 x\ud53d\uc140, \uc704\ub85c\ubd80\ud130 y\ud53d\uc140 \ub5a8\uc5b4\uc838 \uc788\uac8c \ub429\ub2c8\ub2e4. (\uc88c\ud45c (x,y)) \uc774 \uc785\ubb38\uc11c\uc758 \ub4b7\ucabd\uc5d0\uc11c\ub294 \uc5b4\ub5bb\uac8c \uc6d0\uc810\uc744 \ub2e4\ub978 \uc704\uce58\ub85c \uc774\ub3d9\ud558\uace0, \uaca9\uc790\ub97c \ud68c\uc804\ud558\uac70\ub098 \uc2ec\uc9c0\uc5b4 \ud655\ub300 \ubc0f \ucd95\uc18c\ub97c \ud558\ub294\uc9c0 \uc0b4\ud3b4\ubd05\ub2c8\ub2e4. \uc9c0\uae08\uc740 \uae30\ubcf8 \uaca9\uc790\ub97c \uadf8\ub300\ub85c \uc0ac\uc6a9\ud558\uaca0\uc2b5\ub2c8\ub2e4.", "localization_tags": ["inprogress"], "locale": "ko", "last_edit": "2016-04-27T22:06:33", "review_tags": []}, {"uuid": "3c8b0f8b-0f73-4331-a1b5-c27a5af3d974", "title": "Rysowanie kszta\u0142t\u00f3w w canvas", "url": "/pl/docs/Web/API/Canvas_API/Tutorial/rysowanie_ksztaltow", "tags": [], "summary": "<img alt=\"\" class=\"internal\" src=\"https://mdn.mozillademos.org/files/224/Canvas_default_grid.png\" style=\"float: right; height: 220px; width: 220px;\"/>Before we can start drawing, we need to talk about the canvas grid or <strong>coordinate space</strong>. Our HTML skeleton from the previous page had a canvas element 150 pixels wide and 150 pixels high. To the right, you see this canvas with the default grid overlayed. Normally 1 unit in the grid corresponds to 1 pixel on the canvas. The origin of this grid is positioned in the <em>top left</em> corner at coordinate (0,0). All elements are placed relative to this origin. So the position of the top left corner of the blue square becomes x pixels from the left and y pixels from the top, at coordinate (x,y). Later in this tutorial we'll see how we can translate the origin to a different position, rotate the grid and even scale it, but for now we'll stick to the default.", "localization_tags": ["inprogress"], "locale": "pl", "last_edit": "2016-04-06T00:42:01", "review_tags": []}, {"uuid": "5db6ff5b-d12c-493e-93de-27fb978df571", "title": "Desenhando formas com canvas", "url": "/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes", "tags": ["Canvas", "Gr\u00e1ficos", "Intermedi\u00e1rio", "HTML", "Tutorial", "HTML Canvas"], "summary": "<img alt=\"\" class=\"internal\" src=\"https://mdn.mozillademos.org/files/224/Canvas_default_grid.png\" style=\"float: right; height: 220px; width: 220px;\"/>Antes que possamos come\u00e7ar a desenhar, precisamos falar sobre a grade de tela ou <strong>espa\u00e7o de coordenadas</strong>. O modelo HTML na pagina anterior tinha um elemento canvas de 150 pixels de largura e 150 pixels de altura. A direita, voc\u00ea ver\u00e1 este canvas com a grade padr\u00e3o sobreposta. Normalmente 1 unidade na grade corresponde a um pixel na tela. A origem desta grade est\u00e1 pocisionada no canto superior esquerdo (coordenadas (0,0)). Todos os elementos s\u00e3o colocados em rela\u00e7\u00e3o a esta origem. Assim, a posi\u00e7\u00e3o do canto superior esquedo do quadrado azul, se torna x pixels dos pixels da esquerda e y a partir do topo (coordenadas (x,y)). Mais tarde nesse tutorial vamos ver como podemos traduziar a origem para uma posi\u00e7\u00e3o diferente, girar a grade e at\u00e9 mesmo escalona-la. Por enquanto vamos ficar com o padr\u00e3o.", "localization_tags": ["inprogress"], "locale": "pt-BR", "last_edit": "2016-06-15T21:15:42", "review_tags": ["editorial"]}, {"uuid": "7249b82c-d895-49ae-9af8-11dd1103f509", "title": "\u0420\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u0444\u0438\u0433\u0443\u0440 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e canvas", "url": "/ru/docs/Web/API/Canvas_API/Tutorial/%D0%A0%D0%B8%D1%81%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%84%D0%B8%D0%B3%D1%83%D1%80", "tags": [], "summary": "<img alt=\"\" class=\"internal\" src=\"https://mdn.mozillademos.org/files/224/Canvas_default_grid.png\" style=\"float: right; height: 220px; width: 220px;\"/>\u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c \u043a\u0430\u043a \u043c\u044b \u043d\u0430\u0447\u043d\u0435\u043c \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e \u0441\u0435\u0442\u043a\u0435 canvas \u0438\u043b\u0438 <strong>\u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u043d\u043e\u0439 \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u0438</strong>. \u041d\u0430\u0448 HTML \u043a\u0430\u0440\u043a\u0430\u0441 \u0438\u0437 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432\u043a\u043b\u044e\u0447\u0430\u043b \u0432 \u0441\u0435\u0431\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442 canvas 150 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432 \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 150 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432 \u0432\u044b\u0441\u043e\u0442\u0443. \u0421\u043f\u0440\u0430\u0432\u0430 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u044d\u0442\u043e\u0442 canvas <span class=\"short_text\" id=\"result_box\" lang=\"ru\"><span class=\"hps\">\u0441 \u0441\u0435\u0442\u043a\u043e\u0439</span><span>, \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u043c\u043e\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e</span></span>. <span id=\"result_box\" lang=\"ru\"><span class=\"hps\">\u041e\u0431\u044b\u0447\u043d\u043e 1 \u0435\u0434\u0438\u043d\u0438\u0446\u0430</span> <span class=\"hps\">\u043d\u0430 \u0441\u0435\u0442\u043a\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442</span> <span class=\"hps\">1 \u043f\u0438\u043a\u0441\u0435\u043b\u044e \u043d\u0430</span></span> canvas. <span id=\"result_box\" lang=\"ru\"><span>\u041d\u0430\u0447\u0430\u043b\u043e \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u044d\u0442\u043e\u0439 \u0441\u0435\u0442\u043a\u0438</span> <span class=\"hps\">\u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043e</span> <em><span class=\"hps\">\u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u043b\u0435\u0432\u043e\u043c</span> <span class=\"hps\">\u0443\u0433\u043b\u0443</span></em> <span class=\"hps\">\u0432</span> <span class=\"atn hps\">\u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0435 <code><em>(</em></code></span><span><code><em>0,0)</em></code>.</span></span> <span id=\"result_box\" lang=\"ru\"><span class=\"hps\">\u0412\u0441\u0435</span> <span class=\"hps\">\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u044b</span> <span class=\"hps\">\u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e</span> <span class=\"hps\">\u044d\u0442\u043e\u0433\u043e</span> <span class=\"hps\">\u043d\u0430\u0447\u0430\u043b\u0430</span><span>. </span><span class=\"hps\">\u0422\u0430\u043a</span>\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, <span class=\"hps\">\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e</span> <span class=\"hps\">\u043b\u0435\u0432\u043e\u0433\u043e \u0443\u0433\u043b\u0430</span> <span class=\"hps\">\u0441\u0438\u043d\u0435\u0433\u043e \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0430 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442</span> <code><em><span class=\"hps\">\u0445</span></em></code> <span class=\"hps\">\u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0441\u043b\u0435\u0432\u0430</span><span class=\"hps\"> \u0438</span> <code><em><span class=\"hps\">\u0443</span></em></code> <span class=\"hps\">\u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439</span> <span class=\"hps\">\u0441\u0432\u0435\u0440\u0445\u0443,</span> <span class=\"hps\">\u043d\u0430</span> <span class=\"hps\">\u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0435 <code><em>(\u0445</em></code></span><span><code><em>, \u0443)</em></code>.</span></span> <span id=\"result_box\" lang=\"ru\"><span class=\"hps\">\u041f\u043e\u0437\u0436\u0435 \u0432</span> <span class=\"hps\">\u044d\u0442\u043e\u043c \u0443\u0440\u043e\u043a\u0435 \u043c\u044b</span> <span class=\"hps\">\u0443\u0432\u0438\u0434\u0438\u043c, \u043a\u0430\u043a</span> <span class=\"hps\">\u043c\u043e\u0436\u043d\u043e</span> <span class=\"hps\">\u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438</span> <span class=\"hps\">\u043d\u0430\u0447\u0430\u043b\u043e \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442</span> <span class=\"hps\">\u0432 \u0434\u0440\u0443\u0433\u043e\u0435 \u043c\u0435\u0441\u0442\u043e</span><span>,</span> <span class=\"hps\">\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0441\u0435\u0442\u043a\u0443</span> <span class=\"hps\">\u0438 \u0434\u0430\u0436\u0435</span> <span class=\"hps\">\u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0435</span><span>, \u043d\u043e \u0441\u0435\u0439\u0447\u0430\u0441</span> <span class=\"hps\">\u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0440\u0438\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f</span> <span class=\"hps\">\u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0441\u0435\u0442\u043a\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.</span></span>", "localization_tags": [], "locale": "ru", "last_edit": "2016-10-22T04:11:22", "review_tags": []}, {"uuid": "8d9da605-9929-4388-9c81-82b49cdaf097", "title": "\u4f7f\u7528canvas\u6765\u7ed8\u5236\u56fe\u5f62", "url": "/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes", "tags": ["Canvas", "\u8fdb\u9636", "\u753b\u5e03", "\u6559\u7a0b", "HTML5", "HTML Canvas", "\u56fe\u5f62"], "summary": "<img alt=\"\" class=\"internal\" src=\"https://mdn.mozillademos.org/files/224/Canvas_default_grid.png\" style=\"float: right; height: 220px; width: 220px;\"/>", "localization_tags": [], "locale": "zh-CN", "last_edit": "2016-10-18T20:05:28", "review_tags": []}, {"uuid": "21bc1fc5-d986-4e8a-905e-bad2018546cf", "title": "\u7e6a\u88fd\u5716\u5f62", "url": "/zh-TW/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes", "tags": [], "summary": "<img alt=\"\" class=\"internal\" src=\"https://mdn.mozillademos.org/files/224/Canvas_default_grid.png\" style=\"float: right; width: 220px; height: 220px;\"/>\u5728\u958b\u59cb\u7e6a\u5716\u524d\uff0c\u6211\u5011\u5fc5\u9808\u5148\u4e86\u89e3\u756b\u5e03 (canvas) \u7db2\u683c\uff0c\u6216\u8457\u662f\u8aaa\u5ea7\u6a19\u7a7a\u9593\u3002\u5728\u524d\u4e00\u9801\u6559\u5b78\u4e2d\u7684 HTML \u7bc4\u672c\u6709\u4e00\u500b\u5bec150 pixels (\u50cf\u7d20)\u3001\u9ad8150 pixels \u7684\u756b\u5e03\u3002\u5982\u53f3\u5716\uff0c\u4f60\u5728\u756b\u5e03\u9810\u8a2d\u7db2\u683c\u4e0a\u7e6a\u5716\uff0c\u7db2\u683c\u4e0a 1 \u55ae\u4f4d\u76f8\u7576\u65bc\u756b\u5e03\u4e0a 1 pixel\uff0c\u7db2\u683c\u7684\u539f\u9ede (\u5ea7\u6a19 (0, 0) ) \u5750\u843d\u65bc\u5de6\u4e0a\u89d2\uff0c\u6240\u6709\u5143\u7d20\u5b9a\u4f4d\u7686\u76f8\u5c0d\u65bc\u6b64\u5de6\u4e0a\u89d2\u539f\u9ede\uff0c\u6240\u4ee5\u85cd\u8272\u65b9\u584a\u7684\u4f4d\u7f6e\u70ba\u5f9e\u5de6\u5f80\u53f3\u63a8 x pixels\u3001\u5f9e\u4e0a\u5f80\u4e0b\u63a8 y pixels (\u4ea6\u5373\u5ea7\u6a19 (x, y) )\u3002\u73fe\u5728\u6211\u5011\u5148\u5c08\u6ce8\u5728\u9810\u8a2d\u8a2d\u5b9a\u4e0a\uff0c\u4e4b\u5f8c\u6211\u5011\u6703\u770b\u5230\u5982\u4f55\u8f49\u63db\u539f\u9ede\u4f4d\u7f6e\u3001\u65cb\u8f49\u7db2\u683c\u4ee5\u53ca\u7e2e\u653e\u7db2\u683c\u3002", "localization_tags": [], "locale": "zh-TW", "last_edit": "2016-07-06T08:22:57", "review_tags": []}], "modified": "2016-07-18T12:06:55", "label": "Drawing shapes with canvas", "localization_tags": [], "locale": "en-US", "id": 79147, "last_edit": "2016-07-18T12:06:43", "summary": "<img alt=\"\" class=\"internal\" src=\"https://mdn.mozillademos.org/files/224/Canvas_default_grid.png\" style=\"float: right; height: 220px; width: 220px;\"/>Before we can start drawing, we need to talk about the canvas grid or <strong>coordinate space</strong>. Our HTML skeleton from the previous page had a canvas element 150 pixels wide and 150 pixels high. To the right, you see this canvas with the default grid overlayed. Normally 1 unit in the grid corresponds to 1 pixel on the canvas. The origin of this grid is positioned in the <em>top left</em> corner at coordinate (0,0). All elements are placed relative to this origin. So the position of the top left corner of the blue square becomes x pixels from the left and y pixels from the top, at coordinate (x,y). Later in this tutorial we'll see how we can translate the origin to a different position, rotate the grid and even scale it, but for now we'll stick to the default.", "sections": [{"id": "Quick_Links", "title": null}, {"id": "The_grid", "title": "The grid"}, {"id": "Drawing_rectangles", "title": "Drawing rectangles"}, {"id": "Rectangular_shape_example", "title": "Rectangular shape example"}, {"id": "Drawing_paths", "title": "Drawing paths"}, {"id": "Drawing_a_triangle", "title": "Drawing a triangle"}, {"id": "Moving_the_pen", "title": "Moving the pen"}, {"id": "Lines", "title": "Lines"}, {"id": "Arcs", "title": "Arcs"}, {"id": "Bezier_and_quadratic_curves", "title": "Bezier and quadratic curves"}, {"id": "Quadratic_Bezier_curves", "title": "Quadratic Bezier curves"}, {"id": "Cubic_Bezier_curves", "title": "Cubic Bezier curves"}, {"id": "Rectangles", "title": "Rectangles"}, {"id": "Making_combinations", "title": "Making combinations"}, {"id": "Path2D_objects", "title": "Path2D objects"}, {"id": "Path2D_example", "title": "Path2D example"}, {"id": "Using_SVG_paths", "title": "Using SVG paths"}], "slug": "Web/API/Canvas_API/Tutorial/Drawing_shapes", "review_tags": []}