{"id":16383846,"url":"https://github.com/jakesidsmith/canvasimo","last_synced_at":"2025-03-21T02:30:59.841Z","repository":{"id":57193829,"uuid":"57448017","full_name":"JakeSidSmith/canvasimo","owner":"JakeSidSmith","description":"An HTML5 canvas drawing library, with 150+ useful methods, jQuery-like fluent interface, and cross-browser compatibility enhancements.","archived":false,"fork":false,"pushed_at":"2019-05-05T22:14:40.000Z","size":2544,"stargazers_count":16,"open_issues_count":29,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-22T16:55:47.620Z","etag":null,"topics":["canvas","canvas-2d-context","drawing","fluent-interface","html5-canvas","jquery"],"latest_commit_sha":null,"homepage":"http://canvasimo.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JakeSidSmith.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-30T15:07:52.000Z","updated_at":"2023-10-11T04:40:50.000Z","dependencies_parsed_at":"2022-09-15T22:30:19.107Z","dependency_job_id":null,"html_url":"https://github.com/JakeSidSmith/canvasimo","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JakeSidSmith%2Fcanvasimo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JakeSidSmith%2Fcanvasimo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JakeSidSmith%2Fcanvasimo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JakeSidSmith%2Fcanvasimo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JakeSidSmith","download_url":"https://codeload.github.com/JakeSidSmith/canvasimo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221811387,"owners_count":16884305,"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","drawing","fluent-interface","html5-canvas","jquery"],"created_at":"2024-10-11T04:09:49.457Z","updated_at":"2024-10-28T09:07:15.038Z","avatar_url":"https://github.com/JakeSidSmith.png","language":"TypeScript","readme":"# Canvasimo [![CircleCI](https://circleci.com/gh/JakeSidSmith/canvasimo/tree/master.svg?style=svg)](https://circleci.com/gh/JakeSidSmith/canvasimo/tree/master)\n\nAn HTML5 canvas drawing library, with 150+ useful methods, jQuery-like fluent interface, and cross-browser compatibility enhancements.\n\n**Full documentation and examples available on [canvasimo.com](http://canvasimo.com)**\n\n## Installation\n\nInstall Canvasimo with npm (add `--save` to add to your package.json)\n\n```shell\nnpm install canvasimo\n```\n\n...or download from [GitHub](https://github.com/JakeSidSmith/canvasimo)\n\n## Getting started\n\n### Load Canvasimo\n\nCanvasimo can be bundled with all major build tools, or loaded with a script tag and used as a global\n\n#### With an ES6 bundler / TypeScript (recommended)\n\n```typescript\nimport Canvasimo from 'canvasimo';\n// Or\nimport { Canvasimo } from 'canvasimo';\n```\n\nBoth of these will import the Canvasimo class as it is both a default and named export.\n\n#### With an ES5 bundler / commonjs\n\n```javascript\nvar canvasimo = require('canvasimo');\nvar Canvasimo = canvasimo.Canvasimo;\n```\n\n#### As a global\n\n```html\n\u003cscript type=\"text/javascript\" src=\"path/to/canvasimo.js\"\u003e\n```\n\nNow Canvasimo is accessible globally like so (to allow for ES6 and TypeScript default imports)\n\n```typescript\nconst Canvasimo = canvasimo.Canvasimo;\n```\n\n## Create a Canvasimo instance\n\n```typescript\n// Get your canvas element\nconst element = document.getElementById('canvas');\n\n// Create Canvasimo instance\nconst canvas = new Canvasimo(element);\n```\n\n## Begin drawing\n\nHere's a simple chart example\n\n```typescript\nconst margin = 20;\nconst width = 600;\nconst height = 200;\nconst start = 0;\nconst end = 11;\nconst colors = ['red', 'green', 'blue'];\nconst data = [\n  [3, 7, 2, 8, 3, 8, 5, 4, 4, 7],\n  [7, 5, 6, 7, 8, 4, 5, 3, 2, 3],\n  [9, 8, 7, 5, 3, 6, 4, 5, 2, 5]\n];\n\ncanvas\n  // Set the canvas size\n  .setSize(width, height)\n  // Set some initial fill and stroke styles\n  .setFill('black')\n  .setStroke('black')\n  .setStrokeWidth(1)\n  // Setup fonts for the axis labels\n  .setTextAlign('center')\n  .setTextBaseline('middle')\n  .setFontFamily('arial')\n  .setFontSize(10)\n  // Draw the axis lines\n  .beginPath()\n  .strokeLine(margin, margin, margin, height - margin)\n  .beginPath()\n  .strokeLine(margin, height - margin, width - margin, height - margin)\n  // Draw the x axis labels\n  .repeat(start, end, (index) =\u003e {\n    canvas\n      .fillText(index, margin / 2, height - margin - (height - margin * 2) / 10 * index)\n  })\n  // Loop over our data\n  .forEach(data, (dataSet, index) =\u003e {\n    const verticalScale = (height - margin * 2) / (end - 1);\n    const horizontalScale = (width - margin * 2) / (dataSet.length - 1);\n\n    // Map our values to our chart area\n    const values = dataSet.map((value, index) =\u003e [index * horizontalScale, -value * verticalScale]);\n\n    canvas\n      // Save the current canvas state\n      .save()\n      // Move to the bottom left corner of the chart area\n      .translate(margin, height - margin)\n      // Draw a data set as a path\n      .beginPath()\n      .strokePath(values, colors[index])\n      // Restore canvas to its previous state\n      .restore()\n  });\n```\n\n## TypeScript support\n\nAs of version `0.7.0` Canvasimo only officially supports TypeScript `3.1.6` and upwards.\n\nCanvasimo _may_ work with older versions of TypeScript, but due to a change in TypeScript's native lib types you will need to create a global type alias:\n\n```ts\ntype Canvas2DContextAttributes = CanvasRenderingContext2DSettings;\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjakesidsmith%2Fcanvasimo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjakesidsmith%2Fcanvasimo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjakesidsmith%2Fcanvasimo/lists"}