{"_id":"universal-canvas-context","_rev":"4-fead7cf9e50a5d92fc751cfe9e2ea083","name":"universal-canvas-context","dist-tags":{"latest":"1.0.0","beta":"2.0.0-beta"},"versions":{"1.0.0":{"name":"universal-canvas-context","author":{"name":"Rax Team"},"version":"1.0.0","description":"Universal canvas context api","main":"lib/index.js","scripts":{"start":"build-scripts start","build":"build-scripts build"},"pre-commit":["lint"],"keywords":["Rax","canvas"],"engines":{"npm":">=3.0.0"},"devDependencies":{"typescript":"^3.7.5","driver-universal":"^3.0.0","rax":"^1.1.0","rax-text":"^1.0.1","rax-view":"^1.0.2","build-plugin-rax-component":"^0.2.0","@alib/build-scripts":"^0.1.0"},"_id":"universal-canvas-context@1.0.0","_nodeVersion":"10.21.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-ZjdoQyp7sDNB6o1xj93ulD2u1KYjEmMqZMGvIABREjREFlix70O4BTWFrADpMRI3uW6A2N7L45y4xksKqaIvwQ==","shasum":"46eb98e6a3013b027e11f9fae2af36b40b85609e","tarball":"https://registry.npmjs.org/universal-canvas-context/-/universal-canvas-context-1.0.0.tgz","fileCount":20,"unpackedSize":14341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCAg9CRA9TVsSAnZWagAAMuoQAJrRaA9JMJW+mSz0KoVB\nRQe09/KcBZA1zaS5/MddwxXv5bpjhLty938AGhnDStd5XdbWp3EGy2suhyMO\nNEADbq8qC/jNh4BahUoveTGsgqR4RNi0tI74tp9R8HaCliBpBzUzAbmDtQMt\nlOyA7MfPRq56xFdJ84P3DYhuT1y4ARkEiWTYVjp4atfZ/+oTrCse8g2PUk5P\n//k02rYX4HWG9OSQ1xYQPMY6xHBhQcEikhUgQPg98Dn/iNHH7maePO7XfW8W\n9jGPge+oG68JYToUf0i76IOyrhiScf8ixuZThhV8Daer55HyxmDAlJEftwLm\nXqhkZOCuC+2RYzbcMxOFOpM4kefdlA4o30eMzXdAFjMJOQ7ZC9peSCn9CsGj\n2QKxxAFgxIOIZ05MrpR27dE7b/6motZQaNO9m1/B4dMGlJ34sByIhP+CDKrA\nTCP+yOm4ZBIa+TWdSSCI6Ni3r9lGwTHrOE7al7Vwho9XXNmq69hLnrp+aJ5w\n7FmJ/gHUaiXOTZnXHTl4TkCC9UVAhiFEnVwkg5THBWMIaRkQag5SK375nYta\nhCJtIb8ebu//ceRqQUf6tQOYOr53ZyCCSj11JOq+Jlb5ejEYPxSqfY1LdNkK\nEpedwXeHhTrNbKY0Ybfz/R8wcNxA9lolU+SAg16kGvfZFU6ZAYdRNq/c200c\nePUj\r\n=JpYJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYbStkQ/tDlx5jgxe9TT17GOLXkXRp9jiddnNWrnC2jwIhALqV/2ofeNY7HifOlGPWmaOWPem8EOihHXsDE2rhB48m"}]},"maintainers":[{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"}],"_npmUser":{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/universal-canvas-context_1.0.0_1594361916563_0.38513053119957497"},"_hasShrinkwrap":false},"2.0.0-beta":{"name":"universal-canvas-context","version":"2.0.0-beta","description":"--- title: createCanvasContext ---","main":"index.js","module":"index.es.js","unpkg":"index.umd.js","typings":"types/index.d.ts","peerDependencies":{"universal-env":"^4.0.0-beta"},"dependencies":{"@babel/runtime-corejs3":"^7.11.0"},"license":"BSD-3-Clause","author":{"name":"rax"},"_id":"universal-canvas-context@2.0.0-beta","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-qa7M/RChSVCYiN8tzHl/WOZqXQpjj6um7lWi6Jz9mgFddg+gl2Dcz52Ns19g94FsVGOK4vhQo+BXugPAkb5yKQ==","shasum":"9c6606b8fb14bbb64b6d3f0ade352daaf68ec2c2","tarball":"https://registry.npmjs.org/universal-canvas-context/-/universal-canvas-context-2.0.0-beta.tgz","fileCount":20,"unpackedSize":130040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/Vz/CRA9TVsSAnZWagAAX2wP/iLdVIzIMNjhKHqTOkEZ\nHcgbdvucEhqKK2cNRbnfFhZZwKGt7lVrs8TeCI++405oso98IA/9O715rdEJ\nOtY7dAFUU856eOQvQWCl6qwAQs+r5zoiJ8kslJTy36FeSKYRzkOFl5yDVbFb\nfvAn5bfv1CTOdZurY+YVmQSLCcwAhuME+A30WX+8V3bdviRk4a/L8GztuIFK\nvfI9yHsULJA9OQq/JTbnPIlYOA3rbQBuacph5Ivi6bdavW/G8Zf5mKoMR2Pc\nqkU6XCY6/fVv9c8zNQlUqTemooxE+5imKzSpzTJVVFEy7s9qR/wkoHr7M5Xw\n4ZyfKmIQCw/t+VjGqabkWLkFUi+hIRLHvNrjJTOuFMyOZ7Tqy3yJbdkAGhPn\nrGi/Z0rMQJFOfePFJD0pEXpv13DEoMQKUVCEa+tNdNRauqa8dbbUQ5BwRYEF\n13Lr+S4eb65gx9DZMdHWzt4H2QnmEhLchmuoIHMDy5KX5AdRYSVJPcFXD0o1\nYjIywU5eZXyWEjB729C0SA8tP4f8NFJGC7y9YbO0KWAxc/uT997NKI5KbfW+\nZwdvA9A948iotDrPwFX20zSvNVWvDmYGH9ddZVCqKMM1Bkggpj3Yut5hGZcC\n9AtUw+Mu4tqLVzhtO9GOCRdW47K7aTidcd8gQWTDLxIXjFdfJiJm4tgDzzwy\nBEEy\r\n=Mh6R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEQIIj+AI8vMFAxFGU0bb7x3m7eoiM+3FrJWkAa593KPAiEA7PAXVtKjkyEtRCngYnLAN+Qeky/YCVhE4cjGo3twmhU="}]},"_npmUser":{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"},"directories":{},"maintainers":[{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/universal-canvas-context_2.0.0-beta_1610439934460_0.6008631055179308"},"_hasShrinkwrap":false}},"time":{"created":"2020-07-10T06:18:36.563Z","1.0.0":"2020-07-10T06:18:36.710Z","modified":"2022-05-22T19:22:08.367Z","2.0.0-beta":"2021-01-12T08:25:35.022Z"},"maintainers":[{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"}],"description":"--- title: createCanvasContext ---","author":{"name":"rax"},"readme":"---\ntitle: createCanvasContext\n---\n\n# createCanvasContext \n[![npm](https://img.shields.io/npm/v/universal-canvas-context.svg)](https://www.npmjs.com/package/universal-canvas-context)\n\nUniversal canvas api.\n\n<div style=\"display: flex;flex-direction: row;justify-content: space-between;\">\n<div style=\"margin-right: 20px;\">\n\n## Support\n\n<img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" title=\"h5\" /> <img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" title=\"ali miniprogram\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\" title=\"wechatMiniprogram\"> <img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg\" width=\"25px\" height=\"25px\" title=\"bytedanceMicroApp\">\n\n## Install\n\n```bash\n$ npm install universal-canvas-context --save\n```\n\n## Usage\n\n```js\nimport { createElement, useEffect, Fragment } from 'rax';\nimport createCanvasContext from 'universal-canvas-context';\n\nfunction App() {\n  useEffect(() => {\n    createCanvasContext('canvasId', '2d').then(context => {\n      context.fillStyle = 'red';\n      context.fillRect(0, 0, 100, 100);\n      context.draw();\n    });\n  }, []);\n\n  return (<>\n    <canvas id='canvasId'></canvas>\n  </>)\n}\n```\nYou can also import from the big package:\n\n```js\nimport {createCanvasContext} from 'universal-api';\n```\n## Methods\n\n### `createContext(canvasId, type, options)`\n\nOnly in MiniApp, the return `context` has valid `draw` method.\n\n```js\ncreateContext(\"canvasId\").then((context) => {\n  context.fillStyle = 'red';\n  context.fillRect(0, 0, 100, 100);\n  // Only in alibaba miniapp, draw isn't an empty function\n\tcontext.draw();\n});\n```\n\n</div>\n<div>\n\n```jsx | inline\n/**\n * iframe: true\n */\nimport React from 'react';\nexport default () => (\n  <iframe style={{\n      boxShadow: '0 2px 15px rgba(0,0,0,0.1)',\n      width: '375px',\n      height: '700px'\n    }} src='https://herbox.online/p/109000004/app_1aKtEd7SK?previewZoom=100&view=preview&defaultPage=pages/universal-canvas-context/index&topSlider=false'></iframe>\n);\n```\n\n<div style=\"display: flex;margin-top: 50px;\">\n  <div>\n    <img src=\"https://img.alicdn.com/imgextra/i2/O1CN01emXrdK1Oh8DlD6w3t_!!6000000001736-0-tps-694-620.jpg\" width=\"200\" height=\"200\" />\n    <div style=\"text-align: center;\">wechat miniprogram</div>\n  </div>\n</div>\n\n</div>\n</div>\n","readmeFilename":"README.en-US.md","license":"BSD-3-Clause"}