{"id":22345678,"url":"https://github.com/gerhynes/html5-canvas","last_synced_at":"2025-03-26T10:22:30.112Z","repository":{"id":106045438,"uuid":"106048447","full_name":"gerhynes/html5-canvas","owner":"gerhynes","description":"A HTML5 canvas to play with. Built for Wes Bos' JavaScript 30 course. ","archived":false,"fork":false,"pushed_at":"2018-01-14T19:34:42.000Z","size":3,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-31T11:49:38.495Z","etag":null,"topics":["html5-canvas","javascript","javascript30"],"latest_commit_sha":null,"homepage":"https://gk-hynes.github.io/html5-canvas/","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/gerhynes.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":"2017-10-06T20:39:43.000Z","updated_at":"2018-01-23T21:48:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"94c5febe-ec8f-4ac9-849f-6a6f9d15c7a5","html_url":"https://github.com/gerhynes/html5-canvas","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/gerhynes%2Fhtml5-canvas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fhtml5-canvas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fhtml5-canvas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fhtml5-canvas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gerhynes","download_url":"https://codeload.github.com/gerhynes/html5-canvas/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245632761,"owners_count":20647273,"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":["html5-canvas","javascript","javascript30"],"created_at":"2024-12-04T09:18:22.926Z","updated_at":"2025-03-26T10:22:30.106Z","avatar_url":"https://github.com/gerhynes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [HTML5 Canvas](https://gk-hynes.github.io/html5-canvas/)\n\nA HTML5 canvas to play with. Built for Wes Bos'\n[JavaScript 30](https://javascript30.com/) course.\n\n[![Screenshot of HTML5 CANVAS](https://screenshots.firefoxusercontent.com/images/948ea796-e715-41df-88df-c8294dbe3ed8.png)](https://gk-hynes.github.io/html5-canvas/)\n\n## Notes\n\n### Canvas\n\nYou don't draw directly on the canvas element. You draw on the context. The context can be 2D or 3D.\n\n```js\nconst canvas = document.querySelector(\"#draw\");\nconst ctx = canvas.getContext(\"2d\");\n```\n\nBy default the canvas os 800x800px. Set `canvas.width` to be `window.innerWidth` and `canvas.height` to be `window.innerHeight` to make it as big as the window.\n\nWhen you draw, you need to set a colour and style for the line you are going to create. Set these with `strokeStyle`, `lineJoin` and `lineCap`.\n\nTo draw a line you need a starting x and y value and an ending x and y value. Create `lastX` and `lastY` variables to set these.\n\nListen for mousemove and log that event to the `draw` function, which is then called whenever you move your mouse on top of the canvas.\n\nListen for mousedown, mouseup, and mouseout, and, using functions, set `isDrawing` to either true or false. This establishes click and drag functionality.\n\nTo draw, start a path with `beginPath()`, start from an x and y, move the line to another x and y, and call `stroke()`.\n\n```js\nctx.beginPath();\n// start from\nctx.moveTo(lastX, lastY);\n// go to\nctx.lineTo(e.offsetX, e.offsetY);\nctx.stroke();\n```\n\nAfter each stroke update the `lastX` and `lastY` variables. Also, set the `mousedown` event listener so that before someone does a mousemove `lastX` and `lastY` are updated and you don't always start from 0.\n\n### HSL (Hue, Saturation, Lightness)\n\nHSL is an alternative colour system to Hexadecimal or RGBA colours. It takes three values.\n\n`Hue` is a degree on the colour wheel. 0 (or 360) is red, 120 is green, and 240 is blue.\n\n`Saturation` gives a percentage value for the intensity of the colour. 100% is the full colour.\n\n`Lightness` is also measured as a percent. 0% is black, 100% is white, and 50%is the average.\n\nInitially, set the variable `hue` to be 0 .\nSet `strokeStyle` to `hsl(${hue}, 100%, 50%)`.\nIncrement `hue` at the end of the `draw` function.\nIf `hue` goes over 360 you can reset it to zero.\n\nYou can set `lienWidth` to change when `hue` changes.\n\nAlternatively, you can set `direction` to `true` (so `lineWidth` is increasing) and use an if statement to flip the direction if `lineWidth` goes over 100 or under 1.\n\n```js\nif (ctx.lineWidth \u003e= 100 || ctx.lineWidth \u003c= 1) {\n  direction = !direction;\n}\nif (direction) {\n  ctx.lineWidth++;\n} else {\n  ctx.lineWidth--;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgerhynes%2Fhtml5-canvas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgerhynes%2Fhtml5-canvas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgerhynes%2Fhtml5-canvas/lists"}