{"id":20778254,"url":"https://github.com/mustafadalga/html5-canvas-guide","last_synced_at":"2025-04-30T18:42:28.814Z","repository":{"id":126221204,"uuid":"265685537","full_name":"mustafadalga/HTML5-Canvas-Guide","owner":"mustafadalga","description":"Applications in this repository, developed by the HTML5 Canvas Ultimate Guide pieces of training that offered by Alperen Talaslıoğlu.","archived":false,"fork":false,"pushed_at":"2020-05-20T23:15:53.000Z","size":1273,"stargazers_count":6,"open_issues_count":0,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-30T18:51:09.956Z","etag":null,"topics":["canvas","canvas-2d-context","canvas-animation","canvas-game","canvas2d","game","game-2d","game-development","gamedev","games","html5","html5-application","html5-canvas","html5-game","html5-game-development","javascript","javascript-canvas","javascript-canvas-game","javascript-game","javascript-games"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mustafadalga.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-20T21:03:26.000Z","updated_at":"2024-06-14T04:34:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"4e1e099c-df44-4dbb-b14f-f632ea028c82","html_url":"https://github.com/mustafadalga/HTML5-Canvas-Guide","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mustafadalga%2FHTML5-Canvas-Guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mustafadalga%2FHTML5-Canvas-Guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mustafadalga%2FHTML5-Canvas-Guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mustafadalga%2FHTML5-Canvas-Guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mustafadalga","download_url":"https://codeload.github.com/mustafadalga/HTML5-Canvas-Guide/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251764466,"owners_count":21640066,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","canvas-2d-context","canvas-animation","canvas-game","canvas2d","game","game-2d","game-development","gamedev","games","html5","html5-application","html5-canvas","html5-game","html5-game-development","javascript","javascript-canvas","javascript-canvas-game","javascript-game","javascript-games"],"created_at":"2024-11-17T13:20:13.768Z","updated_at":"2025-04-30T18:42:28.809Z","avatar_url":"https://github.com/mustafadalga.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HTML5 Canvas Ultimate Guide\n\n**Applications in this repository, developed by the [HTML5 Canvas Ultimate Guide](https://www.udemy.com/course/html5-canvas-ultimate-guide/) pieces of training that offered by [Alperen Talaslıoğlu](https://www.udemy.com/user/alperen2/).**\n\n\n\n\u003chr\u003e\n\nThere are live pages to see this training.\n\nIf you want to see the example applications in the course, please click on the relevant subject.\n\n\t\n\u003chr\u003e\n\n1. **Introduction**\n   * [Hello World](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/01/index.html)\n2. **Drawing Lines and Paths on Canvas**\n   * [Draw Lines](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/02/1/index.html)\n   * [Drawing Complex Lines](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/02/2/index.html)\n   * [Line Caps](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/02/3/index.html)\n   * [Line Join](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/02/4/index.html)\n   * [Shadows](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/02/5/index.html)\n   * [Lab Session Drawing Complex Shapes](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/02/6/index.html)\n   * [Drawing Curves](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/02/7/index.html)\n   * [Drawing Quadratic Curves](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/02/8/index.html)\n   * [Drawing Bezier Curves](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/02/9/index.html)\n   * [Lab Session Drawing a Heart](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/02/10/index.html) \n3. **Drawing Shapes on Canvas**\n   * [Drawing Rectangles](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/03/1/index.html)\n   * [Lab Session Drawing a Chessboard](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/03/2/index.html)\n   * [Drawing Circles](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/03/3/index.html)\n   * [Lab Session Drawing a Pac-Man](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/03/4/index.html)\n   * [Lab Session Drawing Polygons](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/03/5/index.html)\n   * [Shadows on Shapes](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/03/6/index.html)\n4. **Drawing Texts on Canvas**\n   * [Drawing Basic Texts](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/04/1/index.html)\n   * [Styling Texts](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/04/2/index.html)\n   * [Lab Session Drawing 3D Texts](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/04/3/index.html)\n   * [Positioning Texts](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/04/4/index.html)\n   * [Shadows on Texts](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/04/5/index.html)\n5. **Project  Building a Open Source Bar Chart Library**\n   * [Open Source Bar Chart Library](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/05/index.html)\n6. **Drawing Images on Canvas**\n   * [Drawing Images](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/06/1/index.html)\n   * [Lab Session Drawing Pokemon Characters From A Tile](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/06/2/index.html)\n   * [Lab Session Filtering Images](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/06/3/index.html)\n7. **Advanced**\n   * [save() and restore() the canvas state](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/07/1/index.html)\n   * [Save Canvas as an Image](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/07/2/index.html)\n   * [Patterns](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/07/3/index.html)\n   * [Gradients](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/07/4/index.html)\n8. **Animations**\n   * [Animation Basics](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/08/1/index.html)\n   * [Lab Session Bouncing Ball](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/08/2/index.html)\n   * [Sprite Animation](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/08/3/index.html)\n   * [Lab Session Running A Game Character](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/08/4/index.html)\n9. **Transformations on Canvas**\n   * [Scale](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/09/1/index.html)\n   * [Rotate](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/09/2/index.html)\n   * [Translate](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/09/3/index.html)\n   * [Transform](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/09/4/index.html)\n9. **Making Physics with Animations on Canvas**\n   * [Introduction](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/10/1/index.html)  \n   * [Velocity](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/10/2/index.html)\n   * [Acceleration](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/10/3/index.html)\n   * [Vertical Projection](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/10/4/index.html)\n   * [Horizontal Projection and Angular Projection](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/10/5/index.html)\n   * [Momentum on One Axis](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/10/6/index.html)\n   * [Momentum on Two Axes](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/10/7/index.html)\n9. **User Interactions on Canvas**\n   * [Handling Key Events](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/11/1/index.html)  \n   * [Handling Mouse Events](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/11/2/index.html)\n   * [Lab Session Juggling a Ball with Mouse](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/11/3/index.html)\n   * [Lab Session Dragging and Dropping Canvas Objects](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/11/4/index.html)\n9. **Project  Building a Flappy Monster Game**\n   * [Flappy Monster Game](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/12/index.html)\n9. **Project  Building Paint Application**\n   * [Paint Application](https://mustafadalga.github.io/Front-End-Developments/HTML5-Canvas-Guide/13/index.html)\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmustafadalga%2Fhtml5-canvas-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmustafadalga%2Fhtml5-canvas-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmustafadalga%2Fhtml5-canvas-guide/lists"}