component---src-pages-toolbox-html-5-canvas-tsx-7cd7bcb3022a5b1598e9.js.map

{"version":3,"sources":["webpack:///./src/pages/toolbox/html5-canvas.tsx"],"names":["HTML5Canvas","canvasRef","useRef","useEffect","_canvas","current","getContext","ctx","fillStyle","font","fillText","title","ref","height","width","style"],"mappings":"8FAAA,sDA8BeA,UA1BS,WACtB,IAAMC,EAAYC,iBAA0B,MAa5C,OAXAC,qBAAU,WACR,IAAMC,EAAUH,EAAUI,QAC1B,GAAID,aAAJ,EAAIA,EAASE,WAAY,CACvB,IAAMC,EAAMH,EAAQE,WAAW,MAC/B,IAAKC,EAAK,OACVA,EAAIC,UAAY,OAChBD,EAAIE,KAAK,aACTF,EAAIG,SAAS,gCAAiC,GAAI,QAEnD,IAGD,kBAAC,IAAD,CAAeC,MAAM,UACnB,sCAEA,4BAAQC,IAAKX,EAAWY,OAAO,MAAMC,MAAM,MAAMC,MAAO,CACtD,gBAAmB,OACnB,UAAa,SAFf,8C","file":"component---src-pages-toolbox-html-5-canvas-tsx-7cd7bcb3022a5b1598e9.js","sourcesContent":["import React, { FC, useEffect, useRef } from 'react'\nimport { ToolboxLayout } from '../../components'\nimport './tool.scss'\n\nconst HTML5Canvas: FC = () => {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n\n  useEffect(() => {\n    const _canvas = canvasRef.current\n    if (_canvas?.getContext) {\n      const ctx = _canvas.getContext('2d')\n      if (!ctx) return\n      ctx.fillStyle = '#999'\n      ctx.font='18px Arial';\n      ctx.fillText('This browser supports canvas.', 25, 100);\n    }\n  }, [])\n\n  return (\n    <ToolboxLayout title='Canvas'>\n      <h1>Canvas</h1>\n\n      <canvas ref={canvasRef} height='200' width='300' style={{\n        'backgroundColor': '#DDD',\n        'marginTop': '20px'\n      }}>Canvas is not supported on this browser</canvas>\n    </ToolboxLayout>\n  )\n}\n\nexport default HTML5Canvas\n"],"sourceRoot":""}