[{"data":1,"prerenderedAt":7377},["ShallowReactive",2],{"en-tag-js-1":3},{"count":4,"content":5},3,[6,798,3259],{"id":7,"title":8,"body":9,"category":782,"createdAt":784,"description":785,"extension":786,"index":50,"meta":787,"navigation":64,"path":788,"publish":64,"seo":789,"series":790,"seriesTitle":785,"stem":791,"tag":792,"thumbnail":795,"updatedAt":796,"__hash__":797},"en_series\u002Fen\u002Fseries\u002Fconcrete5vue-1.md","Concrete5 + Vue CLI3： Making Rich UI in package. 1st： Set up vue project on Concrete5 package.",{"type":10,"value":11,"toc":769},"minimark",[12,25,28,33,36,118,121,126,129,132,145,148,153,156,160,164,167,175,179,182,188,191,197,203,210,213,218,232,236,242,249,393,399,409,415,600,606,609,616,684,698,704,715,720,747,750,755,758,762,765],[13,14,15,16,20,21,24],"p",{},"Hello everyone. In this post, I explain how to use ",[17,18,19],"strong",{},"Vue.js"," to make rich UI in ",[17,22,23],{},"Concrete5 package",". At there, I write the process that create vue project in C5 package directory and use compiled js file.",[13,26,27],{},"I assumed Readers know how to customize C5 packages and basic C5 knowledge.The C5’s version is 8.4+ in this post.",[29,30,32],"h2",{"id":31},"why-use-vuejs","Why use Vue.js?",[13,34,35],{},"Reason is simple. Because making rich UI with PHP(C5 system) and jquery is so hard.\nC5 prepares helper to print form as below.",[37,38,43],"pre",{"className":39,"code":40,"language":41,"meta":42,"style":42},"language-php shiki shiki-themes material-theme-ocean","\u002F\u002F Read Helper\n$form = Core::make('helper\u002Fform');\n\n\u002F\u002Finput type of text\necho $form->text($name, $default_value);\n\n\u002F\u002Ftext area\necho $form-> textarea($name, $default_value);\n\n\u002F\u002F File manager\n$file_selector = Core::make('helper\u002Fconcrete\u002Ffile_manager');\necho $file_selector->file('label', 'name_attr', 'Select Photo', $default_fileObj);\n","php","",[44,45,46,54,60,66,72,78,83,89,95,100,106,112],"code",{"__ignoreMap":42},[47,48,51],"span",{"class":49,"line":50},"line",1,[47,52,53],{},"\u002F\u002F Read Helper\n",[47,55,57],{"class":49,"line":56},2,[47,58,59],{},"$form = Core::make('helper\u002Fform');\n",[47,61,62],{"class":49,"line":4},[47,63,65],{"emptyLinePlaceholder":64},true,"\n",[47,67,69],{"class":49,"line":68},4,[47,70,71],{},"\u002F\u002Finput type of text\n",[47,73,75],{"class":49,"line":74},5,[47,76,77],{},"echo $form->text($name, $default_value);\n",[47,79,81],{"class":49,"line":80},6,[47,82,65],{"emptyLinePlaceholder":64},[47,84,86],{"class":49,"line":85},7,[47,87,88],{},"\u002F\u002Ftext area\n",[47,90,92],{"class":49,"line":91},8,[47,93,94],{},"echo $form-> textarea($name, $default_value);\n",[47,96,98],{"class":49,"line":97},9,[47,99,65],{"emptyLinePlaceholder":64},[47,101,103],{"class":49,"line":102},10,[47,104,105],{},"\u002F\u002F File manager\n",[47,107,109],{"class":49,"line":108},11,[47,110,111],{},"$file_selector = Core::make('helper\u002Fconcrete\u002Ffile_manager');\n",[47,113,115],{"class":49,"line":114},12,[47,116,117],{},"echo $file_selector->file('label', 'name_attr', 'Select Photo', $default_fileObj);\n",[13,119,120],{},"When I write them on page view.php, forms are shown as below.",[122,123],"image-render",{":src":124,":width":125},"'_mix\u002Fformhelpertest-768x272.png'","'100%'",[13,127,128],{},"Input text, textarea and C5’s file manager appeared. These has name property and can post data.",[13,130,131],{},"Simply forms are enough to use them. But,",[133,134,135,139,142],"ul",{},[136,137,138],"li",{},"Implication of front-end validation",[136,140,141],{},"Repeatable form",[136,143,144],{},"Dependency Forms (There are some patterns correspond to inputed value)",[13,146,147],{},"These implication is hard with only jquery and PHP.",[149,150,152],"h3",{"id":151},"lets-use-vuejs-power","Let’s use vue.js power",[13,154,155],{},"Many Rich Form’s UI are developed easily with Vue.js, React.js and backbone.js( which manage data state and HTML template by javascript.) Using those libraries, we can develop rich UI while reducing the number of development days.",[29,157,159],{"id":158},"preparation-of-creating-package","Preparation of creating package",[149,161,163],{"id":162},"create-a-dedicated-directory-for-package","Create a dedicated directory for package",[13,165,166],{},"Let’s make package has UI built by vue. Create custom package directory named ‘vuetest’ under \u002Fpackage . Directory structure as below.",[37,168,173],{"className":169,"code":171,"language":172},[170],"language-text","documentroot $ cd .\u002Fpackage\npackage $ mkdir vuetest && touch ...\npackage $ tree vuetest\n.\u002F\n└── vuetest\n    ├── controller.php\n    ├── controllers\n    │   └── single_page\n    │       └── dashboard\n    │           └── vuetest.php\n    ├── db.xml\n    ├── icon.png\n    ├── js\n    │\n    └── single_pages\n        └── dashboard\n            └── vuetest\n                └── view.php\n","text",[44,174,171],{"__ignoreMap":42},[149,176,178],{"id":177},"create-vue-project","Create Vue project",[13,180,181],{},"Under package\u002Fvuetest, there are package controller file, single page file that shows UI. Then let’s create js directory and make vue project there, named as ‘packageui’.",[37,183,186],{"className":184,"code":185,"language":172},[170],"package $ cd vuetest\u002Fjs\njs $ vue create packageui\n\nVue CLI v4.4.6\n? Please pick a preset: default (babel, eslint) #default\n\nVue CLI v4.4.6\n✨  Creating project in documentroot\u002Fvuetest\u002Fjs\u002Fpackageui.\n🗃  Initializing git repository...\n⚙️  Installing CLI plugins. This might take a while... \n\n🎉  Successfully created project packageui.\n\njs $ cd packageui && tree -L 1\n.\n├── README.md\n├── babel.config.js\n├── node_modules\n├── package-lock.json\n├── package.json\n├── public\n",[44,187,185],{"__ignoreMap":42},[13,189,190],{},"Vue project has been created successfully! Next, create vue.config.js and write webpack setting for C5’s asset system.",[37,192,195],{"className":193,"code":194,"language":172},[170],"packageui $ touch vue.config.js\n",[44,196,194],{"__ignoreMap":42},[37,198,201],{"className":199,"code":200,"language":172},[170],"module.exports = {\n    configureWebpack: {\n      output: {\n        filename: '[name].js',\n        chunkFilename: '[name].js'\n      }\n    },\n  }\n",[44,202,200],{"__ignoreMap":42},[13,204,205,206,209],{},"This file configs that the name of compiled js files from vue file when running npm run build will be same name under the ",[44,207,208],{},"\u002Fdist"," directory.",[13,211,212],{},"When we build vue file on initial webpack config, built js file has been had hashed letters such as app384#34a.js . The hash will change at every build. Compiled js file name must be always same to be read by C5’s asset system. So I config that file.",[214,215,217],"h4",{"id":216},"if-you-want-use-vue-project-by-multiple-packages","If you want use vue project by multiple packages",[13,219,220,221,224,225,228,229],{},"In this time, I create dedicated vue project under the package called vuetest and its directory. But if you use it by multi packages, create ",[44,222,223],{},"\u002Fjs"," directory under ",[44,226,227],{},"\u002Fapplication"," directory and make vue project under ",[44,230,231],{},"\u002Fapplication\u002Fjs",[149,233,235],{"id":234},"combine-c5-and-compiled-js-file","Combine C5 and compiled js file",[13,237,238,239,241],{},"When running build with vue cli, compiled js file will be generated under ",[44,240,208],{}," directory. Let’s config as C5 system and page renders components can read that files!",[13,243,244,245,248],{},"By the way, build ",[44,246,247],{},"main.js"," . That file renders App component at page contains div element with id attribute named as ‘app’.",[37,250,255],{"className":251,"code":252,"filename":253,"language":254,"meta":42,"style":42},"language-javascript shiki shiki-themes material-theme-ocean","import Vue from 'vue'\nimport App from '.\u002FApp.vue'\n\nVue.config.productionTip = false\n\nnew Vue({\n  render: h => h(App),\n}).$mount('#app')\n","src\u002Fmain.js","javascript",[44,256,257,281,297,301,324,328,343,367],{"__ignoreMap":42},[47,258,259,263,267,270,274,278],{"class":49,"line":50},[47,260,262],{"class":261},"s6cf3","import",[47,264,266],{"class":265},"s0W1g"," Vue ",[47,268,269],{"class":261},"from",[47,271,273],{"class":272},"sAklC"," '",[47,275,277],{"class":276},"sfyAc","vue",[47,279,280],{"class":272},"'\n",[47,282,283,285,288,290,292,295],{"class":49,"line":56},[47,284,262],{"class":261},[47,286,287],{"class":265}," App ",[47,289,269],{"class":261},[47,291,273],{"class":272},[47,293,294],{"class":276},".\u002FApp.vue",[47,296,280],{"class":272},[47,298,299],{"class":49,"line":4},[47,300,65],{"emptyLinePlaceholder":64},[47,302,303,306,309,312,314,317,320],{"class":49,"line":68},[47,304,305],{"class":265},"Vue",[47,307,308],{"class":272},".",[47,310,311],{"class":265},"config",[47,313,308],{"class":272},[47,315,316],{"class":265},"productionTip ",[47,318,319],{"class":272},"=",[47,321,323],{"class":322},"sbqyR"," false\n",[47,325,326],{"class":49,"line":74},[47,327,65],{"emptyLinePlaceholder":64},[47,329,330,333,337,340],{"class":49,"line":80},[47,331,332],{"class":272},"new",[47,334,336],{"class":335},"sdLwU"," Vue",[47,338,339],{"class":265},"(",[47,341,342],{"class":272},"{\n",[47,344,345,348,351,355,359,361,364],{"class":49,"line":85},[47,346,347],{"class":335},"  render",[47,349,350],{"class":272},":",[47,352,354],{"class":353},"s7ZW3"," h",[47,356,358],{"class":357},"sJ14y"," =>",[47,360,354],{"class":335},[47,362,363],{"class":265},"(App)",[47,365,366],{"class":272},",\n",[47,368,369,372,375,377,380,382,385,388,390],{"class":49,"line":91},[47,370,371],{"class":272},"}",[47,373,374],{"class":265},")",[47,376,308],{"class":272},[47,378,379],{"class":335},"$mount",[47,381,339],{"class":265},[47,383,384],{"class":272},"'",[47,386,387],{"class":276},"#app",[47,389,384],{"class":272},[47,391,392],{"class":265},")\n",[37,394,397],{"className":395,"code":396,"language":172},[170],"packageui ＄ npm run build\n.\n├── README.md\n├── babel.config.js\n├── dist\n│   ├── app.js\n│   ├── app.js.map\n│   ├── chunk-vendors.js\n│   ├── chunk-vendors.js.map\n│   ├── css\n│   ├── favicon.ico\n│   ├── img\n│   └── index.html\n├\n",[44,398,396],{"__ignoreMap":42},[13,400,401,402,405,406],{},"Build succeeded. Some files are not needed, but it is just ok to config as reading ",[44,403,404],{},"app.js"," and ",[44,407,408],{},"chunk-vendor.js",[13,410,411,412,374],{},"To read those js files, write some PHP script in package’s install controller php file (",[44,413,414],{},"package\u002Fvuetest\u002Fcontroller.php",[37,416,419],{"className":39,"code":417,"filename":418,"language":41,"meta":42,"style":42},"\u003C?php\nnamespace Concrete\\Package\\Vuetest;\ndefined('C5_EXECUTE') or die('Access Denied.');\nuse \\Concrete\\Core\\Asset\\AssetList;\nuse \\Concrete\\Core\\Asset\\Asset;\n\nclass Controller extends \\Concrete\\Core\\Package\\Package {\n    protected $pkgHandle = 'vuetest';\n    protected $appVersionRequired = '5.7.4';\n    protected $pkgVersion = '1.0.0';\n\n    public function on_start()\n    {\n        $al = AssetList::getInstance();\n        $al->register(\n            'javascript', 'package-vue-build', 'js\u002Fpackageui\u002Fdist\u002Fapp.js',\n            array('version' => '1.0.0', 'position' => Asset::ASSET_POSITION_FOOTER, 'combine' => true),\n            $this->pkgHandle\n        );\n        \n        $al->register(\n            'javascript', 'package-vue-chunk', 'js\u002Fpackageui\u002Fdist\u002Fchunk-vendors.js',\n            array('version' => '1.0.0', 'position' => Asset::ASSET_POSITION_FOOTER, 'combine' => true),\n            $this->pkgHandle\n        );\n        \n        $al->registerGroup('package-vue-production', array(\n            array('javascript', 'package-vue-build'),\n            array('javascript', 'package-vue-chunk'),\n        )); \n    }\n...\n}\n","controller.php",[44,420,421,426,431,436,441,446,450,455,460,465,470,474,479,485,491,497,503,509,515,521,527,532,538,543,548,553,558,564,570,576,582,588,594],{"__ignoreMap":42},[47,422,423],{"class":49,"line":50},[47,424,425],{},"\u003C?php\n",[47,427,428],{"class":49,"line":56},[47,429,430],{},"namespace Concrete\\Package\\Vuetest;\n",[47,432,433],{"class":49,"line":4},[47,434,435],{},"defined('C5_EXECUTE') or die('Access Denied.');\n",[47,437,438],{"class":49,"line":68},[47,439,440],{},"use \\Concrete\\Core\\Asset\\AssetList;\n",[47,442,443],{"class":49,"line":74},[47,444,445],{},"use \\Concrete\\Core\\Asset\\Asset;\n",[47,447,448],{"class":49,"line":80},[47,449,65],{"emptyLinePlaceholder":64},[47,451,452],{"class":49,"line":85},[47,453,454],{},"class Controller extends \\Concrete\\Core\\Package\\Package {\n",[47,456,457],{"class":49,"line":91},[47,458,459],{},"    protected $pkgHandle = 'vuetest';\n",[47,461,462],{"class":49,"line":97},[47,463,464],{},"    protected $appVersionRequired = '5.7.4';\n",[47,466,467],{"class":49,"line":102},[47,468,469],{},"    protected $pkgVersion = '1.0.0';\n",[47,471,472],{"class":49,"line":108},[47,473,65],{"emptyLinePlaceholder":64},[47,475,476],{"class":49,"line":114},[47,477,478],{},"    public function on_start()\n",[47,480,482],{"class":49,"line":481},13,[47,483,484],{},"    {\n",[47,486,488],{"class":49,"line":487},14,[47,489,490],{},"        $al = AssetList::getInstance();\n",[47,492,494],{"class":49,"line":493},15,[47,495,496],{},"        $al->register(\n",[47,498,500],{"class":49,"line":499},16,[47,501,502],{},"            'javascript', 'package-vue-build', 'js\u002Fpackageui\u002Fdist\u002Fapp.js',\n",[47,504,506],{"class":49,"line":505},17,[47,507,508],{},"            array('version' => '1.0.0', 'position' => Asset::ASSET_POSITION_FOOTER, 'combine' => true),\n",[47,510,512],{"class":49,"line":511},18,[47,513,514],{},"            $this->pkgHandle\n",[47,516,518],{"class":49,"line":517},19,[47,519,520],{},"        );\n",[47,522,524],{"class":49,"line":523},20,[47,525,526],{},"        \n",[47,528,530],{"class":49,"line":529},21,[47,531,496],{},[47,533,535],{"class":49,"line":534},22,[47,536,537],{},"            'javascript', 'package-vue-chunk', 'js\u002Fpackageui\u002Fdist\u002Fchunk-vendors.js',\n",[47,539,541],{"class":49,"line":540},23,[47,542,508],{},[47,544,546],{"class":49,"line":545},24,[47,547,514],{},[47,549,551],{"class":49,"line":550},25,[47,552,520],{},[47,554,556],{"class":49,"line":555},26,[47,557,526],{},[47,559,561],{"class":49,"line":560},27,[47,562,563],{},"        $al->registerGroup('package-vue-production', array(\n",[47,565,567],{"class":49,"line":566},28,[47,568,569],{},"            array('javascript', 'package-vue-build'),\n",[47,571,573],{"class":49,"line":572},29,[47,574,575],{},"            array('javascript', 'package-vue-chunk'),\n",[47,577,579],{"class":49,"line":578},30,[47,580,581],{},"        )); \n",[47,583,585],{"class":49,"line":584},31,[47,586,587],{},"    }\n",[47,589,591],{"class":49,"line":590},32,[47,592,593],{},"...\n",[47,595,597],{"class":49,"line":596},33,[47,598,599],{},"}\n",[13,601,602,605],{},[44,603,604],{},"$al->register"," registers those two js files referred by path at controller of vuetest package. For simply asset reading, let’s group two files as name of package-vue-production .",[13,607,608],{},"C5 has asset registering\u002Freading system like this. Using this system, we can use registered files anywhere pages without file path problem. Now, we have registered js files, so next we set reading them on the page.",[13,610,611,612,615],{},"Write PHP script in ",[44,613,614],{},"vuetest\u002Fsingle_pages\u002Fdashboard\u002Fvuetest\u002Fview.php"," as below",[37,617,619],{"className":39,"code":618,"language":41,"meta":42,"style":42},"\u003C?php\nnamespace Concrete\\Package\\Vuetest\\Controller\\SinglePage\\Dashboard;\ndefined('C5_EXECUTE') or die('Access Denied.');\nuse \\Concrete\\Core\\Page\\Controller\\DashboardPageController;\n\nclass Vuetest extends DashboardPageController\n{\n    public $packageHandle = 'vuetest';\n\n    public function view() {\n        $this->requireAsset('package-vue-production');\n        $this->set('success', 'My success message');\n    }\n}\n",[44,620,621,625,630,634,639,643,648,652,657,661,666,671,676,680],{"__ignoreMap":42},[47,622,623],{"class":49,"line":50},[47,624,425],{},[47,626,627],{"class":49,"line":56},[47,628,629],{},"namespace Concrete\\Package\\Vuetest\\Controller\\SinglePage\\Dashboard;\n",[47,631,632],{"class":49,"line":4},[47,633,435],{},[47,635,636],{"class":49,"line":68},[47,637,638],{},"use \\Concrete\\Core\\Page\\Controller\\DashboardPageController;\n",[47,640,641],{"class":49,"line":74},[47,642,65],{"emptyLinePlaceholder":64},[47,644,645],{"class":49,"line":80},[47,646,647],{},"class Vuetest extends DashboardPageController\n",[47,649,650],{"class":49,"line":85},[47,651,342],{},[47,653,654],{"class":49,"line":91},[47,655,656],{},"    public $packageHandle = 'vuetest';\n",[47,658,659],{"class":49,"line":97},[47,660,65],{"emptyLinePlaceholder":64},[47,662,663],{"class":49,"line":102},[47,664,665],{},"    public function view() {\n",[47,667,668],{"class":49,"line":108},[47,669,670],{},"        $this->requireAsset('package-vue-production');\n",[47,672,673],{"class":49,"line":114},[47,674,675],{},"        $this->set('success', 'My success message');\n",[47,677,678],{"class":49,"line":481},[47,679,587],{},[47,681,682],{"class":49,"line":487},[47,683,599],{},[13,685,686,689,690,693,694,697],{},[44,687,688],{},"$this->requireAsset('package-vue-production');"," orders page controller that ‘Read registered asset name as ",[44,691,692],{},"“package-vue-production”"," on this page(",[44,695,696],{},"view.php",")!‘",[13,699,700,701],{},"After setting, let’s search if the js files are read. Opening Chrome developer tool…\n",[122,702],{":src":703,":width":125},"'_mix\u002Fsc-2020-08-01-19.52.09-768x133.png'",[13,705,706,707,710,711,714],{},"Path ",[44,708,709],{},"\u002Fpackages\u002Fvuetest\u002Fjs\u002Fdist\u002F**"," are found! Next, create div element has ",[44,712,713],{},"id=\"app\""," and see the page again.",[13,716,717],{},[44,718,719],{},"Invuetest\u002Fsingle_pages\u002Fdashboard\u002Fvuetest\u002Fview.php",[37,721,723],{"className":39,"code":722,"filename":696,"language":41,"meta":42,"style":42},"\u003C?php\ndefined('C5_EXECUTE') or die('Access Denied.');\n?>\n\n\u003Cdiv id=\"app\">\u003C\u002Fdiv>\n",[44,724,725,729,733,738,742],{"__ignoreMap":42},[47,726,727],{"class":49,"line":50},[47,728,425],{},[47,730,731],{"class":49,"line":56},[47,732,435],{},[47,734,735],{"class":49,"line":4},[47,736,737],{},"?>\n",[47,739,740],{"class":49,"line":68},[47,741,65],{"emptyLinePlaceholder":64},[47,743,744],{"class":49,"line":74},[47,745,746],{},"\u003Cdiv id=\"app\">\u003C\u002Fdiv>\n",[13,748,749],{},"Reload page…",[122,751],{":src":752,":width":753,":center":754},"'_mix\u002Fsh-2020-08-01-19.56.01-768x812.png'","'500px'","true",[13,756,757],{},"Vue component (App) are rendered successfully!! Some image and layout dose not work because the paths for img and css are incorrect. But created vue component itself with vue CLI are read and appeared on target page.",[29,759,761],{"id":760},"next-step","Next Step",[13,763,764],{},"The above is the method to create a vue project on the concrete5 package and combine them. Setting to use vue has been readied, so next step, we create form to input data ,flow to register data in DB and registered data editing page .",[766,767,768],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .sbqyR, html code.shiki .sbqyR{--shiki-default:#FF9CAC}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}",{"title":42,"searchDepth":4,"depth":4,"links":770},[771,774,781],{"id":31,"depth":56,"text":32,"children":772},[773],{"id":151,"depth":4,"text":152},{"id":158,"depth":56,"text":159,"children":775},[776,777,780],{"id":162,"depth":4,"text":163},{"id":177,"depth":4,"text":178,"children":778},[779],{"id":216,"depth":68,"text":217},{"id":234,"depth":4,"text":235},{"id":760,"depth":56,"text":761},[783],"devstack","2020-08-25","Making Rich UI in Concrete5 with VueCLI.","md",{},"\u002Fen\u002Fseries\u002Fconcrete5vue-1",{"title":8,"description":785},"enconcrete5vue","en\u002Fseries\u002Fconcrete5vue-1",[793,794,277],"concrete5","js","_mix\u002Fvuewithconcrete.png",null,"uCGiRmlnXldeIG8DikjaUPsIaa4G61Yrz5b1kwmPD2w",{"id":799,"title":800,"body":801,"category":3250,"createdAt":796,"description":3251,"extension":786,"index":796,"meta":3252,"navigation":64,"path":3253,"publish":64,"seo":3254,"series":796,"seriesTitle":796,"stem":3255,"tag":3256,"thumbnail":3257,"updatedAt":796,"__hash__":3258},"en_articles\u002Fen\u002Farticles\u002Fgoogle-map-vuejs.md","How to draw routes on Google Map with Google Maps API and Vue.js",{"type":10,"value":802,"toc":3237},[803,806,810,821,830,833,836,840,849,855,859,869,1201,1208,1211,1215,1221,1262,1265,1321,1331,1469,1472,1476,1482,1777,1786,1789,1797,1810,1816,1819,1826,1931,1935,1938,2348,2354,2357,2422,2425,2428,2431,2435,2442,2445,2790,2797,2800,2803,2807,2810,2814,2817,2820,2835,2841,3196,3214,3217,3220,3224,3227,3231,3234],[13,804,805],{},"Hello developers! Thank you for reading my article. When I developed my own application, I searched how to draw lines on Google Map with Vue. And I have manages to develop it. This article, explains about developing function to dispaly map on your web browser with Google Map API and Vue.js(or vanilla.js). I omit partially how to install vue.js and obtain Google Map API key.",[29,807,809],{"id":808},"obtain-google-map-api-key","Obtain Google Map API key",[13,811,812,813,820],{},"I omit detail to get but explain minimum requirements. At first, obtain Google Map API at ",[814,815,819],"a",{"href":816,"rel":817},"https:\u002F\u002Fcloud.google.com\u002Fmaps-platform?hl=ja",[818],"nofollow","Google Cloud Platform"," with your Google Account.",[13,822,823,824,829],{},"Requests for $ 200 per month are free. So you can test within the free limit. And you need ",[814,825,828],{"href":826,"rel":827},"https:\u002F\u002Fconsole.cloud.google.com\u002Fapis\u002Flibrary\u002Fmaps-backend.googleapis.com?",[818],"Maps JavaScript API"," to render Google Map on the web browser.",[122,831],{":src":832,":width":753,":center":754},"'_mix\u002Fsch-2021-03-07-17.15.12.png'",[13,834,835],{},"Enable this API key and you will obtain the key code. That's all to set up for API.",[29,837,839],{"id":838},"prepear-vuejs","Prepear Vue.js",[13,841,842,843,848],{},"In this time, we develop with ",[814,844,847],{"href":845,"rel":846},"https:\u002F\u002Fcli.vuejs.org\u002F",[818],"Vue CLI",". Create a project with Vue CLI.",[37,850,853],{"className":851,"code":852,"language":172},[170],"$ vue create vue_map\n",[44,854,852],{"__ignoreMap":42},[149,856,858],{"id":857},"load-for-api-sourrce-file","Load for api sourrce file",[13,860,861,862,865,866,209],{},"Insert the below codes to ",[44,863,864],{},"index.html"," under the ",[44,867,868],{},"\u002Fpublic",[37,870,875],{"className":871,"code":872,"filename":873,"language":874,"meta":42,"style":42},"language-html shiki shiki-themes material-theme-ocean","\u003C!DOCTYPE html>\n\u003Chtml lang=\"\">\n  \u003Chead>\n    \u003Cmeta charset=\"utf-8\">\n    \u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    \u003Cmeta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">\n    \u003Clink rel=\"icon\" href=\"\u003C%= BASE_URL %>favicon.ico\">\n    \n　　\u003C!-- Insert this script -->\n    \u003Cscript src=\"http:\u002F\u002Fmaps.google.com\u002Fmaps\u002Fapi\u002Fjs?key=YOUR_API_KEY&language=ja\">\u003C\u002Fscript>\n   \n　　 \u003Ctitle>\u003C%= htmlWebpackPlugin.options.title %>\u003C\u002Ftitle>\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Cnoscript>\n      \u003Cstrong>We're sorry but \u003C%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.\u003C\u002Fstrong>\n    \u003C\u002Fnoscript>\n    \u003Cdiv id=\"app\">\u003C\u002Fdiv>\n    \u003C!-- built files will be auto injected -->\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n","public\u002Findex.html","html",[44,876,877,892,909,919,942,974,1005,1038,1043,1049,1075,1080,1101,1110,1119,1128,1146,1155,1180,1185,1193],{"__ignoreMap":42},[47,878,879,882,886,889],{"class":49,"line":50},[47,880,881],{"class":272},"\u003C!",[47,883,885],{"class":884},"s-wAU","DOCTYPE",[47,887,888],{"class":357}," html",[47,890,891],{"class":272},">\n",[47,893,894,897,899,902,904,907],{"class":49,"line":56},[47,895,896],{"class":272},"\u003C",[47,898,874],{"class":884},[47,900,901],{"class":357}," lang",[47,903,319],{"class":272},[47,905,906],{"class":272},"\"\"",[47,908,891],{"class":272},[47,910,911,914,917],{"class":49,"line":4},[47,912,913],{"class":272},"  \u003C",[47,915,916],{"class":884},"head",[47,918,891],{"class":272},[47,920,921,924,927,930,932,935,938,940],{"class":49,"line":68},[47,922,923],{"class":272},"    \u003C",[47,925,926],{"class":884},"meta",[47,928,929],{"class":357}," charset",[47,931,319],{"class":272},[47,933,934],{"class":272},"\"",[47,936,937],{"class":276},"utf-8",[47,939,934],{"class":272},[47,941,891],{"class":272},[47,943,944,946,948,951,953,955,958,960,963,965,967,970,972],{"class":49,"line":74},[47,945,923],{"class":272},[47,947,926],{"class":884},[47,949,950],{"class":357}," http-equiv",[47,952,319],{"class":272},[47,954,934],{"class":272},[47,956,957],{"class":276},"X-UA-Compatible",[47,959,934],{"class":272},[47,961,962],{"class":357}," content",[47,964,319],{"class":272},[47,966,934],{"class":272},[47,968,969],{"class":276},"IE=edge",[47,971,934],{"class":272},[47,973,891],{"class":272},[47,975,976,978,980,983,985,987,990,992,994,996,998,1001,1003],{"class":49,"line":80},[47,977,923],{"class":272},[47,979,926],{"class":884},[47,981,982],{"class":357}," name",[47,984,319],{"class":272},[47,986,934],{"class":272},[47,988,989],{"class":276},"viewport",[47,991,934],{"class":272},[47,993,962],{"class":357},[47,995,319],{"class":272},[47,997,934],{"class":272},[47,999,1000],{"class":276},"width=device-width,initial-scale=1.0",[47,1002,934],{"class":272},[47,1004,891],{"class":272},[47,1006,1007,1009,1012,1015,1017,1019,1022,1024,1027,1029,1031,1034,1036],{"class":49,"line":85},[47,1008,923],{"class":272},[47,1010,1011],{"class":884},"link",[47,1013,1014],{"class":357}," rel",[47,1016,319],{"class":272},[47,1018,934],{"class":272},[47,1020,1021],{"class":276},"icon",[47,1023,934],{"class":272},[47,1025,1026],{"class":357}," href",[47,1028,319],{"class":272},[47,1030,934],{"class":272},[47,1032,1033],{"class":276},"\u003C%= BASE_URL %>favicon.ico",[47,1035,934],{"class":272},[47,1037,891],{"class":272},[47,1039,1040],{"class":49,"line":91},[47,1041,1042],{"class":265},"    \n",[47,1044,1045],{"class":49,"line":97},[47,1046,1048],{"class":1047},"sC9rS","　　\u003C!-- Insert this script -->\n",[47,1050,1051,1053,1056,1059,1061,1063,1066,1068,1071,1073],{"class":49,"line":102},[47,1052,923],{"class":272},[47,1054,1055],{"class":884},"script",[47,1057,1058],{"class":357}," src",[47,1060,319],{"class":272},[47,1062,934],{"class":272},[47,1064,1065],{"class":276},"http:\u002F\u002Fmaps.google.com\u002Fmaps\u002Fapi\u002Fjs?key=YOUR_API_KEY&language=ja",[47,1067,934],{"class":272},[47,1069,1070],{"class":272},">\u003C\u002F",[47,1072,1055],{"class":884},[47,1074,891],{"class":272},[47,1076,1077],{"class":49,"line":108},[47,1078,1079],{"class":265},"   \n",[47,1081,1082,1085,1088,1091,1094,1097,1099],{"class":49,"line":114},[47,1083,1084],{"class":272},"　　 \u003C",[47,1086,1087],{"class":884},"title",[47,1089,1090],{"class":272},">",[47,1092,1093],{"class":265},"\u003C%= htmlWebpackPlugin.options.title %>",[47,1095,1096],{"class":272},"\u003C\u002F",[47,1098,1087],{"class":884},[47,1100,891],{"class":272},[47,1102,1103,1106,1108],{"class":49,"line":481},[47,1104,1105],{"class":272},"  \u003C\u002F",[47,1107,916],{"class":884},[47,1109,891],{"class":272},[47,1111,1112,1114,1117],{"class":49,"line":487},[47,1113,913],{"class":272},[47,1115,1116],{"class":884},"body",[47,1118,891],{"class":272},[47,1120,1121,1123,1126],{"class":49,"line":493},[47,1122,923],{"class":272},[47,1124,1125],{"class":884},"noscript",[47,1127,891],{"class":272},[47,1129,1130,1133,1135,1137,1140,1142,1144],{"class":49,"line":499},[47,1131,1132],{"class":272},"      \u003C",[47,1134,17],{"class":884},[47,1136,1090],{"class":272},[47,1138,1139],{"class":265},"We're sorry but \u003C%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.",[47,1141,1096],{"class":272},[47,1143,17],{"class":884},[47,1145,891],{"class":272},[47,1147,1148,1151,1153],{"class":49,"line":505},[47,1149,1150],{"class":272},"    \u003C\u002F",[47,1152,1125],{"class":884},[47,1154,891],{"class":272},[47,1156,1157,1159,1162,1165,1167,1169,1172,1174,1176,1178],{"class":49,"line":511},[47,1158,923],{"class":272},[47,1160,1161],{"class":884},"div",[47,1163,1164],{"class":357}," id",[47,1166,319],{"class":272},[47,1168,934],{"class":272},[47,1170,1171],{"class":276},"app",[47,1173,934],{"class":272},[47,1175,1070],{"class":272},[47,1177,1161],{"class":884},[47,1179,891],{"class":272},[47,1181,1182],{"class":49,"line":517},[47,1183,1184],{"class":1047},"    \u003C!-- built files will be auto injected -->\n",[47,1186,1187,1189,1191],{"class":49,"line":523},[47,1188,1105],{"class":272},[47,1190,1116],{"class":884},[47,1192,891],{"class":272},[47,1194,1195,1197,1199],{"class":49,"line":529},[47,1196,1096],{"class":272},[47,1198,874],{"class":884},[47,1200,891],{"class":272},[13,1202,1203,1204,1207],{},"I had tried to install API source with npm but many libraries are for node.js. So I used the outer script file from ",[44,1205,1206],{},"http:\u002F\u002Fmaps.google.com\u002Fmaps\u002Fapi\u002Fjs",". If you use it, you should load it before vue.js loaded.",[13,1209,1210],{},"The script needs the API key you get. When you use in the production, set the API configure on Google Cloud Platform as used only within your site (specific origin). If you don't that, anybody can use the key and billing just comes to YOUR credit card!",[149,1212,1214],{"id":1213},"register-google-map-api-as-vue-plugin","Register Google Map API as Vue plugin",[13,1216,1217,1218],{},"After the script loaded, you can use the classes and method that operate Google Map in ",[44,1219,1220],{},"window.google",[37,1222,1224],{"className":251,"code":1223,"language":254,"meta":42,"style":42},"console.lgo(window.google);\n\u002F**\n*{maps: {…}}\n*\u002F\n",[44,1225,1226,1247,1252,1257],{"__ignoreMap":42},[47,1227,1228,1231,1233,1236,1239,1241,1244],{"class":49,"line":50},[47,1229,1230],{"class":265},"console",[47,1232,308],{"class":272},[47,1234,1235],{"class":335},"lgo",[47,1237,1238],{"class":265},"(window",[47,1240,308],{"class":272},[47,1242,1243],{"class":265},"google)",[47,1245,1246],{"class":272},";\n",[47,1248,1249],{"class":49,"line":56},[47,1250,1251],{"class":1047},"\u002F**\n",[47,1253,1254],{"class":49,"line":4},[47,1255,1256],{"class":1047},"*{maps: {…}}\n",[47,1258,1259],{"class":49,"line":68},[47,1260,1261],{"class":1047},"*\u002F\n",[13,1263,1264],{},"For example, calling the api to mount a map as below.",[37,1266,1268],{"className":251,"code":1267,"language":254,"meta":42,"style":42},"window.google.maps.Map(document.getElementById('map'),{option});\n",[44,1269,1270],{"__ignoreMap":42},[47,1271,1272,1275,1277,1280,1282,1285,1287,1290,1293,1295,1298,1300,1302,1305,1307,1309,1312,1315,1317,1319],{"class":49,"line":50},[47,1273,1274],{"class":265},"window",[47,1276,308],{"class":272},[47,1278,1279],{"class":265},"google",[47,1281,308],{"class":272},[47,1283,1284],{"class":265},"maps",[47,1286,308],{"class":272},[47,1288,1289],{"class":335},"Map",[47,1291,1292],{"class":265},"(document",[47,1294,308],{"class":272},[47,1296,1297],{"class":335},"getElementById",[47,1299,339],{"class":265},[47,1301,384],{"class":272},[47,1303,1304],{"class":276},"map",[47,1306,384],{"class":272},[47,1308,374],{"class":265},[47,1310,1311],{"class":272},",{",[47,1313,1314],{"class":265},"option",[47,1316,371],{"class":272},[47,1318,374],{"class":265},[47,1320,1246],{"class":272},[13,1322,1323,1324,1327,1328,308],{},"But calling ",[44,1325,1326],{},"window.google.maps"," in every time is bothersome so let's make a plugin to call it as ",[44,1329,1330],{},"this.$gm",[37,1332,1334],{"className":251,"code":1333,"filename":253,"language":254,"meta":42,"style":42},"import Vue from 'vue'\nimport App from '.\u002FApp.vue'\n\n\u002F\u002F THIS\nVue.prototype.$gm = window.google.maps;\n\nVue.config.productionTip = false\nnew Vue({\n  render: h => h(App),\n}).$mount('#app')\n",[44,1335,1336,1350,1364,1368,1373,1403,1407,1423,1433,1449],{"__ignoreMap":42},[47,1337,1338,1340,1342,1344,1346,1348],{"class":49,"line":50},[47,1339,262],{"class":261},[47,1341,266],{"class":265},[47,1343,269],{"class":261},[47,1345,273],{"class":272},[47,1347,277],{"class":276},[47,1349,280],{"class":272},[47,1351,1352,1354,1356,1358,1360,1362],{"class":49,"line":56},[47,1353,262],{"class":261},[47,1355,287],{"class":265},[47,1357,269],{"class":261},[47,1359,273],{"class":272},[47,1361,294],{"class":276},[47,1363,280],{"class":272},[47,1365,1366],{"class":49,"line":4},[47,1367,65],{"emptyLinePlaceholder":64},[47,1369,1370],{"class":49,"line":68},[47,1371,1372],{"class":1047},"\u002F\u002F THIS\n",[47,1374,1375,1378,1380,1383,1385,1388,1390,1393,1395,1397,1399,1401],{"class":49,"line":74},[47,1376,305],{"class":1377},"s5Dmg",[47,1379,308],{"class":272},[47,1381,1382],{"class":265},"prototype",[47,1384,308],{"class":272},[47,1386,1387],{"class":265},"$gm ",[47,1389,319],{"class":272},[47,1391,1392],{"class":265}," window",[47,1394,308],{"class":272},[47,1396,1279],{"class":265},[47,1398,308],{"class":272},[47,1400,1284],{"class":265},[47,1402,1246],{"class":272},[47,1404,1405],{"class":49,"line":80},[47,1406,65],{"emptyLinePlaceholder":64},[47,1408,1409,1411,1413,1415,1417,1419,1421],{"class":49,"line":85},[47,1410,305],{"class":265},[47,1412,308],{"class":272},[47,1414,311],{"class":265},[47,1416,308],{"class":272},[47,1418,316],{"class":265},[47,1420,319],{"class":272},[47,1422,323],{"class":322},[47,1424,1425,1427,1429,1431],{"class":49,"line":91},[47,1426,332],{"class":272},[47,1428,336],{"class":335},[47,1430,339],{"class":265},[47,1432,342],{"class":272},[47,1434,1435,1437,1439,1441,1443,1445,1447],{"class":49,"line":97},[47,1436,347],{"class":335},[47,1438,350],{"class":272},[47,1440,354],{"class":353},[47,1442,358],{"class":357},[47,1444,354],{"class":335},[47,1446,363],{"class":265},[47,1448,366],{"class":272},[47,1450,1451,1453,1455,1457,1459,1461,1463,1465,1467],{"class":49,"line":102},[47,1452,371],{"class":272},[47,1454,374],{"class":265},[47,1456,308],{"class":272},[47,1458,379],{"class":335},[47,1460,339],{"class":265},[47,1462,384],{"class":272},[47,1464,387],{"class":276},[47,1466,384],{"class":272},[47,1468,392],{"class":265},[13,1470,1471],{},"Preparation is completed.",[29,1473,1475],{"id":1474},"anyway-lets-mount-the-map","Anyway lets' mount the map.",[13,1477,1478,1479,308],{},"Let's mount the Google Map with vue. Write codes in ",[44,1480,1481],{},"App.vue",[37,1483,1487],{"className":1484,"code":1485,"filename":1486,"language":277,"meta":42,"style":42},"language-vue shiki shiki-themes material-theme-ocean","\u003Ctemplate>\n  \u003Cdiv id=\"app\" class=\"mt-4\">\n      \u003Cdiv id=\"map\">\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n  name: 'App',\n  data(){\n    return{\n      map:undefined,\n    }\n  },\n  mounted(){\n   const map = new this.$gm.Map(document.getElementById('map'),{\n      center: { lat: 34.855273888888888, lng: 135.30649 }, \u002F\u002F自由な緯度・経度を入力\n      zoom: 10,\n    });\n　　this.map = map;\n  }\n}\n\u003C\u002Fscript>\n","src\u002FApp.vue",[44,1488,1489,1498,1528,1550,1558,1566,1570,1578,1589,1605,1613,1620,1628,1632,1637,1644,1690,1726,1738,1747,1760,1765,1769],{"__ignoreMap":42},[47,1490,1491,1493,1496],{"class":49,"line":50},[47,1492,896],{"class":272},[47,1494,1495],{"class":884},"template",[47,1497,891],{"class":272},[47,1499,1500,1502,1504,1506,1508,1510,1512,1514,1517,1519,1521,1524,1526],{"class":49,"line":56},[47,1501,913],{"class":272},[47,1503,1161],{"class":884},[47,1505,1164],{"class":357},[47,1507,319],{"class":272},[47,1509,934],{"class":272},[47,1511,1171],{"class":276},[47,1513,934],{"class":272},[47,1515,1516],{"class":357}," class",[47,1518,319],{"class":272},[47,1520,934],{"class":272},[47,1522,1523],{"class":276},"mt-4",[47,1525,934],{"class":272},[47,1527,891],{"class":272},[47,1529,1530,1532,1534,1536,1538,1540,1542,1544,1546,1548],{"class":49,"line":4},[47,1531,1132],{"class":272},[47,1533,1161],{"class":884},[47,1535,1164],{"class":357},[47,1537,319],{"class":272},[47,1539,934],{"class":272},[47,1541,1304],{"class":276},[47,1543,934],{"class":272},[47,1545,1070],{"class":272},[47,1547,1161],{"class":884},[47,1549,891],{"class":272},[47,1551,1552,1554,1556],{"class":49,"line":68},[47,1553,1105],{"class":272},[47,1555,1161],{"class":884},[47,1557,891],{"class":272},[47,1559,1560,1562,1564],{"class":49,"line":74},[47,1561,1096],{"class":272},[47,1563,1495],{"class":884},[47,1565,891],{"class":272},[47,1567,1568],{"class":49,"line":80},[47,1569,65],{"emptyLinePlaceholder":64},[47,1571,1572,1574,1576],{"class":49,"line":85},[47,1573,896],{"class":272},[47,1575,1055],{"class":884},[47,1577,891],{"class":272},[47,1579,1580,1583,1586],{"class":49,"line":91},[47,1581,1582],{"class":261},"export",[47,1584,1585],{"class":261}," default",[47,1587,1588],{"class":272}," {\n",[47,1590,1591,1594,1596,1598,1601,1603],{"class":49,"line":97},[47,1592,1593],{"class":884},"  name",[47,1595,350],{"class":272},[47,1597,273],{"class":272},[47,1599,1600],{"class":276},"App",[47,1602,384],{"class":272},[47,1604,366],{"class":272},[47,1606,1607,1610],{"class":49,"line":102},[47,1608,1609],{"class":884},"  data",[47,1611,1612],{"class":272},"(){\n",[47,1614,1615,1618],{"class":49,"line":108},[47,1616,1617],{"class":261},"    return",[47,1619,342],{"class":272},[47,1621,1622,1625],{"class":49,"line":114},[47,1623,1624],{"class":884},"      map",[47,1626,1627],{"class":272},":undefined,\n",[47,1629,1630],{"class":49,"line":481},[47,1631,587],{"class":272},[47,1633,1634],{"class":49,"line":487},[47,1635,1636],{"class":272},"  },\n",[47,1638,1639,1642],{"class":49,"line":493},[47,1640,1641],{"class":884},"  mounted",[47,1643,1612],{"class":272},[47,1645,1646,1649,1652,1655,1658,1661,1664,1666,1668,1670,1673,1675,1677,1679,1681,1683,1685,1687],{"class":49,"line":499},[47,1647,1648],{"class":357},"   const",[47,1650,1651],{"class":265}," map",[47,1653,1654],{"class":272}," =",[47,1656,1657],{"class":272}," new",[47,1659,1660],{"class":272}," this.",[47,1662,1663],{"class":265},"$gm",[47,1665,308],{"class":272},[47,1667,1289],{"class":335},[47,1669,339],{"class":884},[47,1671,1672],{"class":265},"document",[47,1674,308],{"class":272},[47,1676,1297],{"class":335},[47,1678,339],{"class":884},[47,1680,384],{"class":272},[47,1682,1304],{"class":276},[47,1684,384],{"class":272},[47,1686,374],{"class":884},[47,1688,1689],{"class":272},",{\n",[47,1691,1692,1695,1697,1700,1703,1705,1709,1712,1715,1717,1720,1723],{"class":49,"line":505},[47,1693,1694],{"class":884},"      center",[47,1696,350],{"class":272},[47,1698,1699],{"class":272}," {",[47,1701,1702],{"class":884}," lat",[47,1704,350],{"class":272},[47,1706,1708],{"class":1707},"sx098"," 34.855273888888888",[47,1710,1711],{"class":272},",",[47,1713,1714],{"class":884}," lng",[47,1716,350],{"class":272},[47,1718,1719],{"class":1707}," 135.30649",[47,1721,1722],{"class":272}," },",[47,1724,1725],{"class":1047}," \u002F\u002F自由な緯度・経度を入力\n",[47,1727,1728,1731,1733,1736],{"class":49,"line":511},[47,1729,1730],{"class":884},"      zoom",[47,1732,350],{"class":272},[47,1734,1735],{"class":1707}," 10",[47,1737,366],{"class":272},[47,1739,1740,1743,1745],{"class":49,"line":517},[47,1741,1742],{"class":272},"    }",[47,1744,374],{"class":884},[47,1746,1246],{"class":272},[47,1748,1749,1752,1754,1756,1758],{"class":49,"line":523},[47,1750,1751],{"class":272},"　　this.",[47,1753,1304],{"class":265},[47,1755,1654],{"class":272},[47,1757,1651],{"class":265},[47,1759,1246],{"class":272},[47,1761,1762],{"class":49,"line":529},[47,1763,1764],{"class":272},"  }\n",[47,1766,1767],{"class":49,"line":534},[47,1768,599],{"class":272},[47,1770,1771,1773,1775],{"class":49,"line":540},[47,1772,1096],{"class":272},[47,1774,1055],{"class":884},[47,1776,891],{"class":272},[13,1778,1779,1780,1785],{},"As the reference about ",[814,1781,1784],{"href":1782,"rel":1783},"https:\u002F\u002Fdevelopers.google.com\u002Fmaps\u002Fdocumentation\u002Fjavascript\u002Freference\u002Fmap?hl=ja",[818],"Maps Class"," says, specify the mounted target DOM in the first argument and write the options in the second argument.",[13,1787,1788],{},"Option cantains",[133,1790,1791,1794],{},[136,1792,1793],{},"center：the central coordinate when displayed the map.",[136,1795,1796],{},"zoom：the scale of zooming. 10 is just right.",[13,1798,1799,1802,1803,1806,1807,308],{},[44,1800,1801],{},"lat"," is the latitude and ",[44,1804,1805],{},"lng"," is the longitude. This map instance will be used to edit map so substitute to vue like ",[44,1808,1809],{},"this.map = map",[37,1811,1814],{"className":1812,"code":1813,"language":172},[170],"$ npm run serve\n",[44,1815,1813],{"__ignoreMap":42},[122,1817],{":src":1818,":width":125},"'_mix\u002Fsch-2021-03-07-17.39.26-768x352.png'",[13,1820,1821,1822,1825],{},"If displayed like this on the ",[44,1823,1824],{},"localhost",", there are no problems. If you favor not to display Street View or other buttons, set the option like below.",[37,1827,1829],{"className":251,"code":1828,"filename":253,"language":254,"meta":42,"style":42},"new this.$gm.Map(document.getElementById('map'),{\n      center: { lat: 34.855273888888888, lng: 135.30649 },\n      zoom: 10,\n      streetViewControl:false, \u002F\u002F hide street view\n      fullscreenControl:false  \u002F\u002F hide full screen\n});\n",[44,1830,1831,1861,1886,1896,1911,1923],{"__ignoreMap":42},[47,1832,1833,1835,1837,1839,1841,1843,1845,1847,1849,1851,1853,1855,1857,1859],{"class":49,"line":50},[47,1834,332],{"class":272},[47,1836,1660],{"class":272},[47,1838,1663],{"class":265},[47,1840,308],{"class":272},[47,1842,1289],{"class":335},[47,1844,1292],{"class":265},[47,1846,308],{"class":272},[47,1848,1297],{"class":335},[47,1850,339],{"class":265},[47,1852,384],{"class":272},[47,1854,1304],{"class":276},[47,1856,384],{"class":272},[47,1858,374],{"class":265},[47,1860,1689],{"class":272},[47,1862,1863,1865,1867,1869,1871,1873,1875,1877,1879,1881,1883],{"class":49,"line":56},[47,1864,1694],{"class":884},[47,1866,350],{"class":272},[47,1868,1699],{"class":272},[47,1870,1702],{"class":884},[47,1872,350],{"class":272},[47,1874,1708],{"class":1707},[47,1876,1711],{"class":272},[47,1878,1714],{"class":884},[47,1880,350],{"class":272},[47,1882,1719],{"class":1707},[47,1884,1885],{"class":272}," },\n",[47,1887,1888,1890,1892,1894],{"class":49,"line":4},[47,1889,1730],{"class":884},[47,1891,350],{"class":272},[47,1893,1735],{"class":1707},[47,1895,366],{"class":272},[47,1897,1898,1901,1903,1906,1908],{"class":49,"line":68},[47,1899,1900],{"class":884},"      streetViewControl",[47,1902,350],{"class":272},[47,1904,1905],{"class":322},"false",[47,1907,1711],{"class":272},[47,1909,1910],{"class":1047}," \u002F\u002F hide street view\n",[47,1912,1913,1916,1918,1920],{"class":49,"line":74},[47,1914,1915],{"class":884},"      fullscreenControl",[47,1917,350],{"class":272},[47,1919,1905],{"class":322},[47,1921,1922],{"class":1047},"  \u002F\u002F hide full screen\n",[47,1924,1925,1927,1929],{"class":49,"line":80},[47,1926,371],{"class":272},[47,1928,374],{"class":265},[47,1930,1246],{"class":272},[29,1932,1934],{"id":1933},"add-click-event-to-the-map","Add click event to the map",[13,1936,1937],{},"You can add event listener for dragging and clicking to the Google Map. It is able to add any functions fired when user clicks the specific position or a maker. As an example, let's create a function to get the latitude and longitude of clicked position on the map.",[37,1939,1941],{"className":251,"code":1940,"filename":253,"language":254,"meta":42,"style":42},"\u003Ctemplate>\n  \u003Cdiv id=\"app\" class=\"mt-4\">\n      \u003Cdiv id=\"map\">\u003C\u002Fdiv>\n      {{position}}\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n\nexport default {\n  name: 'App',\n  data(){\n      return{\n        map:undefined,\n        position:undefined\n      }\n  },\n  methods:{\n   clickOnMap(mapEvent){\n    console.log(mapEvent.latLng.toString())\n    this.position = mapEvent.latLng.toString();\n   }\n  },\n  mounted(){\n   const map = new this.$gm.Map(document.getElementById('map'),{\n      center: { lat: 34.855273888888888, lng: 135.30649 }, \u002F\u002F自由な緯度・経度を入力\n      zoom: 10,\n    });\n\n    \u002F\u002F register event listener\n    map.addListener('click',(mapsMouseEvent)=>{\n      return this.clickOnMap(mapsMouseEvent);\n    });\n\n　　this.map = map;\n  }\n}\n",[44,1942,1943,1951,1979,2001,2012,2020,2028,2032,2040,2044,2051,2064,2073,2080,2087,2095,2100,2104,2111,2124,2151,2175,2180,2184,2192,2227,2253,2263,2270,2274,2279,2298,2316,2322,2327,2338,2343],{"__ignoreMap":42},[47,1944,1945,1947,1949],{"class":49,"line":50},[47,1946,896],{"class":272},[47,1948,1495],{"class":884},[47,1950,891],{"class":272},[47,1952,1953,1955,1957,1959,1961,1963,1965,1967,1969,1971,1973,1975,1977],{"class":49,"line":56},[47,1954,913],{"class":272},[47,1956,1161],{"class":884},[47,1958,1164],{"class":357},[47,1960,319],{"class":272},[47,1962,934],{"class":272},[47,1964,1171],{"class":276},[47,1966,934],{"class":272},[47,1968,1516],{"class":357},[47,1970,319],{"class":272},[47,1972,934],{"class":272},[47,1974,1523],{"class":276},[47,1976,934],{"class":272},[47,1978,891],{"class":272},[47,1980,1981,1983,1985,1987,1989,1991,1993,1995,1997,1999],{"class":49,"line":4},[47,1982,1132],{"class":272},[47,1984,1161],{"class":884},[47,1986,1164],{"class":357},[47,1988,319],{"class":272},[47,1990,934],{"class":272},[47,1992,1304],{"class":276},[47,1994,934],{"class":272},[47,1996,1070],{"class":272},[47,1998,1161],{"class":884},[47,2000,891],{"class":272},[47,2002,2003,2006,2009],{"class":49,"line":68},[47,2004,2005],{"class":272},"      {{",[47,2007,2008],{"class":265},"position",[47,2010,2011],{"class":272},"}}\n",[47,2013,2014,2016,2018],{"class":49,"line":74},[47,2015,1105],{"class":272},[47,2017,1161],{"class":884},[47,2019,891],{"class":272},[47,2021,2022,2024,2026],{"class":49,"line":80},[47,2023,1096],{"class":272},[47,2025,1495],{"class":884},[47,2027,891],{"class":272},[47,2029,2030],{"class":49,"line":85},[47,2031,65],{"emptyLinePlaceholder":64},[47,2033,2034,2036,2038],{"class":49,"line":91},[47,2035,896],{"class":272},[47,2037,1055],{"class":884},[47,2039,891],{"class":272},[47,2041,2042],{"class":49,"line":97},[47,2043,65],{"emptyLinePlaceholder":64},[47,2045,2046,2049],{"class":49,"line":102},[47,2047,2048],{"class":265},"export default ",[47,2050,342],{"class":272},[47,2052,2053,2056,2058,2060,2062],{"class":49,"line":108},[47,2054,2055],{"class":265},"  name: ",[47,2057,384],{"class":272},[47,2059,1600],{"class":276},[47,2061,384],{"class":272},[47,2063,366],{"class":272},[47,2065,2066,2068,2071],{"class":49,"line":114},[47,2067,1609],{"class":335},[47,2069,2070],{"class":265},"()",[47,2072,342],{"class":272},[47,2074,2075,2078],{"class":49,"line":481},[47,2076,2077],{"class":265},"      return",[47,2079,342],{"class":272},[47,2081,2082,2085],{"class":49,"line":487},[47,2083,2084],{"class":1377},"        map",[47,2086,1627],{"class":272},[47,2088,2089,2092],{"class":49,"line":493},[47,2090,2091],{"class":1377},"        position",[47,2093,2094],{"class":272},":undefined\n",[47,2096,2097],{"class":49,"line":499},[47,2098,2099],{"class":272},"      }\n",[47,2101,2102],{"class":49,"line":505},[47,2103,1636],{"class":272},[47,2105,2106,2109],{"class":49,"line":511},[47,2107,2108],{"class":265},"  methods:",[47,2110,342],{"class":272},[47,2112,2113,2116,2118,2121],{"class":49,"line":517},[47,2114,2115],{"class":884},"   clickOnMap",[47,2117,339],{"class":272},[47,2119,2120],{"class":353},"mapEvent",[47,2122,2123],{"class":272},"){\n",[47,2125,2126,2129,2131,2134,2136,2138,2140,2143,2145,2148],{"class":49,"line":523},[47,2127,2128],{"class":265},"    console",[47,2130,308],{"class":272},[47,2132,2133],{"class":335},"log",[47,2135,339],{"class":884},[47,2137,2120],{"class":265},[47,2139,308],{"class":272},[47,2141,2142],{"class":265},"latLng",[47,2144,308],{"class":272},[47,2146,2147],{"class":335},"toString",[47,2149,2150],{"class":884},"())\n",[47,2152,2153,2156,2158,2160,2163,2165,2167,2169,2171,2173],{"class":49,"line":529},[47,2154,2155],{"class":272},"    this.",[47,2157,2008],{"class":265},[47,2159,1654],{"class":272},[47,2161,2162],{"class":265}," mapEvent",[47,2164,308],{"class":272},[47,2166,2142],{"class":265},[47,2168,308],{"class":272},[47,2170,2147],{"class":335},[47,2172,2070],{"class":884},[47,2174,1246],{"class":272},[47,2176,2177],{"class":49,"line":534},[47,2178,2179],{"class":272},"   }\n",[47,2181,2182],{"class":49,"line":540},[47,2183,1636],{"class":272},[47,2185,2186,2188,2190],{"class":49,"line":545},[47,2187,1641],{"class":335},[47,2189,2070],{"class":265},[47,2191,342],{"class":272},[47,2193,2194,2197,2199,2201,2203,2205,2207,2209,2211,2213,2215,2217,2219,2221,2223,2225],{"class":49,"line":550},[47,2195,2196],{"class":265},"   const map ",[47,2198,319],{"class":272},[47,2200,1657],{"class":272},[47,2202,1660],{"class":272},[47,2204,1663],{"class":265},[47,2206,308],{"class":272},[47,2208,1289],{"class":335},[47,2210,1292],{"class":265},[47,2212,308],{"class":272},[47,2214,1297],{"class":335},[47,2216,339],{"class":265},[47,2218,384],{"class":272},[47,2220,1304],{"class":276},[47,2222,384],{"class":272},[47,2224,374],{"class":265},[47,2226,1689],{"class":272},[47,2228,2229,2231,2233,2235,2237,2239,2241,2243,2245,2247,2249,2251],{"class":49,"line":555},[47,2230,1694],{"class":884},[47,2232,350],{"class":272},[47,2234,1699],{"class":272},[47,2236,1702],{"class":884},[47,2238,350],{"class":272},[47,2240,1708],{"class":1707},[47,2242,1711],{"class":272},[47,2244,1714],{"class":884},[47,2246,350],{"class":272},[47,2248,1719],{"class":1707},[47,2250,1722],{"class":272},[47,2252,1725],{"class":1047},[47,2254,2255,2257,2259,2261],{"class":49,"line":560},[47,2256,1730],{"class":884},[47,2258,350],{"class":272},[47,2260,1735],{"class":1707},[47,2262,366],{"class":272},[47,2264,2265,2267],{"class":49,"line":566},[47,2266,1742],{"class":272},[47,2268,2269],{"class":265},");\n",[47,2271,2272],{"class":49,"line":572},[47,2273,65],{"emptyLinePlaceholder":64},[47,2275,2276],{"class":49,"line":578},[47,2277,2278],{"class":1047},"    \u002F\u002F register event listener\n",[47,2280,2281,2284,2286,2289,2291,2293,2296],{"class":49,"line":584},[47,2282,2283],{"class":265},"    map.addListener(",[47,2285,384],{"class":272},[47,2287,2288],{"class":884},"click",[47,2290,384],{"class":272},[47,2292,1711],{"class":272},[47,2294,2295],{"class":265},"(mapsMouseEvent)=>",[47,2297,342],{"class":272},[47,2299,2300,2302,2304,2307,2309,2312,2314],{"class":49,"line":590},[47,2301,2077],{"class":261},[47,2303,1660],{"class":272},[47,2305,2306],{"class":335},"clickOnMap",[47,2308,339],{"class":884},[47,2310,2311],{"class":265},"mapsMouseEvent",[47,2313,374],{"class":884},[47,2315,1246],{"class":272},[47,2317,2318,2320],{"class":49,"line":596},[47,2319,1742],{"class":272},[47,2321,2269],{"class":265},[47,2323,2325],{"class":49,"line":2324},34,[47,2326,65],{"emptyLinePlaceholder":64},[47,2328,2330,2333,2335],{"class":49,"line":2329},35,[47,2331,2332],{"class":265},"　　this.map ",[47,2334,319],{"class":272},[47,2336,2337],{"class":265}," map;\n",[47,2339,2341],{"class":49,"line":2340},36,[47,2342,1764],{"class":272},[47,2344,2346],{"class":49,"line":2345},37,[47,2347,599],{"class":272},[13,2349,2350,2353],{},[44,2351,2352],{},"map.addListener('click',(mapsMouseEvent)=>{...})"," is similar to adding the event to DOM. Insert the callback function to the second argument. By the way, the argument of callback contains automatically the map data like clicked position coordinate.",[13,2355,2356],{},"I register the click event listener has callback executes the below method to get clicked position coordinate.",[37,2358,2360],{"className":251,"code":2359,"filename":253,"language":254,"meta":42,"style":42},"clickOnMap(mapEvent){\n        console.log(mapEvent.latLng.toString())\n        this.position = mapEvent.latLng.toString();\n},\n",[44,2361,2362,2371,2394,2417],{"__ignoreMap":42},[47,2363,2364,2366,2369],{"class":49,"line":50},[47,2365,2306],{"class":335},[47,2367,2368],{"class":265},"(mapEvent)",[47,2370,342],{"class":272},[47,2372,2373,2376,2378,2380,2382,2384,2386,2388,2390,2392],{"class":49,"line":56},[47,2374,2375],{"class":265},"        console",[47,2377,308],{"class":272},[47,2379,2133],{"class":335},[47,2381,339],{"class":884},[47,2383,2120],{"class":265},[47,2385,308],{"class":272},[47,2387,2142],{"class":265},[47,2389,308],{"class":272},[47,2391,2147],{"class":335},[47,2393,2150],{"class":884},[47,2395,2396,2399,2401,2403,2405,2407,2409,2411,2413,2415],{"class":49,"line":4},[47,2397,2398],{"class":272},"        this.",[47,2400,2008],{"class":265},[47,2402,1654],{"class":272},[47,2404,2162],{"class":265},[47,2406,308],{"class":272},[47,2408,2142],{"class":265},[47,2410,308],{"class":272},[47,2412,2147],{"class":335},[47,2414,2070],{"class":884},[47,2416,1246],{"class":272},[47,2418,2419],{"class":49,"line":68},[47,2420,2421],{"class":272},"},\n",[13,2423,2424],{},"When clicking the map, the coordinate displayed. (ignore red point on the center..)",[122,2426],{":src":2427,":width":125},"'_mix\u002Fsch-2021-03-07-18.02.03-768x326.png'",[13,2429,2430],{},"The coordinate is displayed at the under left. Anyway, it is how register an event listener and obtain data of the map.",[29,2432,2434],{"id":2433},"drawing-the-line","Drawing the line.",[13,2436,2437,2438,2441],{},"Next, let's draw the line when clicking the map. To draw lines, you create a instance of ",[44,2439,2440],{},"google.maps.Polyline"," class and set the instance to the map instance.",[13,2443,2444],{},"You can obtain map data as above so let's draw the line when map rendered.",[37,2446,2448],{"className":251,"code":2447,"filename":253,"language":254,"meta":42,"style":42},"...  \nmounted(){\n  const map = new this.$gm.Map(document.getElementById('map'),{\n    center: { lat: 34.855273888888888, lng: 135.30649 },\n    zoom: 10,\n  });\n  map.addListener('click',(mapsMouseEvent)=>{\n    return this.clickOnMap(mapsMouseEvent);\n  });\n  const LINE = new this.$gm.Polyline({\n      path:[\n        { lat: 34.855273888888888, lng: 135.30649 },\n        { lat: 34.854465, lng: 135.8 },\n      ],\n      geodesic: true,\n      strokeColor: \"#FF0000\",\n      strokeOpacity: 1.0,\n      strokeWeight: 2,\n  })\n  LINE.setMap(map);\n  this.map = map;\n} \n...\n",[44,2449,2450,2458,2467,2506,2531,2542,2551,2581,2597,2605,2629,2639,2660,2682,2689,2701,2718,2730,2742,2748,2766,2779,2786],{"__ignoreMap":42},[47,2451,2452,2455],{"class":49,"line":50},[47,2453,2454],{"class":272},"...",[47,2456,2457],{"class":265},"  \n",[47,2459,2460,2463,2465],{"class":49,"line":56},[47,2461,2462],{"class":335},"mounted",[47,2464,2070],{"class":265},[47,2466,342],{"class":272},[47,2468,2469,2472,2474,2476,2478,2480,2482,2484,2486,2488,2490,2492,2494,2496,2498,2500,2502,2504],{"class":49,"line":4},[47,2470,2471],{"class":357},"  const",[47,2473,1651],{"class":265},[47,2475,1654],{"class":272},[47,2477,1657],{"class":272},[47,2479,1660],{"class":272},[47,2481,1663],{"class":265},[47,2483,308],{"class":272},[47,2485,1289],{"class":335},[47,2487,339],{"class":884},[47,2489,1672],{"class":265},[47,2491,308],{"class":272},[47,2493,1297],{"class":335},[47,2495,339],{"class":884},[47,2497,384],{"class":272},[47,2499,1304],{"class":276},[47,2501,384],{"class":272},[47,2503,374],{"class":884},[47,2505,1689],{"class":272},[47,2507,2508,2511,2513,2515,2517,2519,2521,2523,2525,2527,2529],{"class":49,"line":68},[47,2509,2510],{"class":884},"    center",[47,2512,350],{"class":272},[47,2514,1699],{"class":272},[47,2516,1702],{"class":884},[47,2518,350],{"class":272},[47,2520,1708],{"class":1707},[47,2522,1711],{"class":272},[47,2524,1714],{"class":884},[47,2526,350],{"class":272},[47,2528,1719],{"class":1707},[47,2530,1885],{"class":272},[47,2532,2533,2536,2538,2540],{"class":49,"line":74},[47,2534,2535],{"class":884},"    zoom",[47,2537,350],{"class":272},[47,2539,1735],{"class":1707},[47,2541,366],{"class":272},[47,2543,2544,2547,2549],{"class":49,"line":80},[47,2545,2546],{"class":272},"  }",[47,2548,374],{"class":884},[47,2550,1246],{"class":272},[47,2552,2553,2556,2558,2561,2563,2565,2567,2569,2572,2574,2576,2579],{"class":49,"line":85},[47,2554,2555],{"class":265},"  map",[47,2557,308],{"class":272},[47,2559,2560],{"class":335},"addListener",[47,2562,339],{"class":884},[47,2564,384],{"class":272},[47,2566,2288],{"class":276},[47,2568,384],{"class":272},[47,2570,2571],{"class":272},",(",[47,2573,2311],{"class":353},[47,2575,374],{"class":272},[47,2577,2578],{"class":357},"=>",[47,2580,342],{"class":272},[47,2582,2583,2585,2587,2589,2591,2593,2595],{"class":49,"line":91},[47,2584,1617],{"class":261},[47,2586,1660],{"class":272},[47,2588,2306],{"class":335},[47,2590,339],{"class":884},[47,2592,2311],{"class":265},[47,2594,374],{"class":884},[47,2596,1246],{"class":272},[47,2598,2599,2601,2603],{"class":49,"line":97},[47,2600,2546],{"class":272},[47,2602,374],{"class":884},[47,2604,1246],{"class":272},[47,2606,2607,2609,2612,2614,2616,2618,2620,2622,2625,2627],{"class":49,"line":102},[47,2608,2471],{"class":357},[47,2610,2611],{"class":265}," LINE",[47,2613,1654],{"class":272},[47,2615,1657],{"class":272},[47,2617,1660],{"class":272},[47,2619,1663],{"class":265},[47,2621,308],{"class":272},[47,2623,2624],{"class":335},"Polyline",[47,2626,339],{"class":884},[47,2628,342],{"class":272},[47,2630,2631,2634,2636],{"class":49,"line":108},[47,2632,2633],{"class":884},"      path",[47,2635,350],{"class":272},[47,2637,2638],{"class":884},"[\n",[47,2640,2641,2644,2646,2648,2650,2652,2654,2656,2658],{"class":49,"line":114},[47,2642,2643],{"class":272},"        {",[47,2645,1702],{"class":884},[47,2647,350],{"class":272},[47,2649,1708],{"class":1707},[47,2651,1711],{"class":272},[47,2653,1714],{"class":884},[47,2655,350],{"class":272},[47,2657,1719],{"class":1707},[47,2659,1885],{"class":272},[47,2661,2662,2664,2666,2668,2671,2673,2675,2677,2680],{"class":49,"line":481},[47,2663,2643],{"class":272},[47,2665,1702],{"class":884},[47,2667,350],{"class":272},[47,2669,2670],{"class":1707}," 34.854465",[47,2672,1711],{"class":272},[47,2674,1714],{"class":884},[47,2676,350],{"class":272},[47,2678,2679],{"class":1707}," 135.8",[47,2681,1885],{"class":272},[47,2683,2684,2687],{"class":49,"line":487},[47,2685,2686],{"class":884},"      ]",[47,2688,366],{"class":272},[47,2690,2691,2694,2696,2699],{"class":49,"line":493},[47,2692,2693],{"class":884},"      geodesic",[47,2695,350],{"class":272},[47,2697,2698],{"class":322}," true",[47,2700,366],{"class":272},[47,2702,2703,2706,2708,2711,2714,2716],{"class":49,"line":499},[47,2704,2705],{"class":884},"      strokeColor",[47,2707,350],{"class":272},[47,2709,2710],{"class":272}," \"",[47,2712,2713],{"class":276},"#FF0000",[47,2715,934],{"class":272},[47,2717,366],{"class":272},[47,2719,2720,2723,2725,2728],{"class":49,"line":505},[47,2721,2722],{"class":884},"      strokeOpacity",[47,2724,350],{"class":272},[47,2726,2727],{"class":1707}," 1.0",[47,2729,366],{"class":272},[47,2731,2732,2735,2737,2740],{"class":49,"line":511},[47,2733,2734],{"class":884},"      strokeWeight",[47,2736,350],{"class":272},[47,2738,2739],{"class":1707}," 2",[47,2741,366],{"class":272},[47,2743,2744,2746],{"class":49,"line":517},[47,2745,2546],{"class":272},[47,2747,392],{"class":884},[47,2749,2750,2753,2755,2758,2760,2762,2764],{"class":49,"line":523},[47,2751,2752],{"class":265},"  LINE",[47,2754,308],{"class":272},[47,2756,2757],{"class":335},"setMap",[47,2759,339],{"class":884},[47,2761,1304],{"class":265},[47,2763,374],{"class":884},[47,2765,1246],{"class":272},[47,2767,2768,2771,2773,2775,2777],{"class":49,"line":529},[47,2769,2770],{"class":272},"  this.",[47,2772,1304],{"class":265},[47,2774,1654],{"class":272},[47,2776,1651],{"class":265},[47,2778,1246],{"class":272},[47,2780,2781,2783],{"class":49,"line":534},[47,2782,371],{"class":272},[47,2784,2785],{"class":265}," \n",[47,2787,2788],{"class":49,"line":540},[47,2789,593],{"class":272},[13,2791,2792,2793,2796],{},"At the first, create a line instance with ",[44,2794,2795],{},"this.$gm.Polyline",". You can set line width, path (2 points needed), color, and so on with object.",[122,2798],{":src":2799,":width":125},"'_mix\u002Fsch-2021-03-10-21.17.39-768x346.png'",[13,2801,2802],{},"The red line is displayed. The above example is straight, but if you set detailed paths, you can draw as below.",[122,2804],{":src":2805,":width":2806,":center":754},"'_mix\u002Fsch-2021-03-10-21.19.41.png'","'300px'",[13,2808,2809],{},"I downloaded these coordinate data from my friend's phone GPS and that has detailed data coordinate as an array.",[29,2811,2813],{"id":2812},"drawing-lines-with-any-clikced-positions","Drawing lines with any clikced positions",[13,2815,2816],{},"Rendering the line at the initial dispaly is successful. Next, let's draw the line from point to point when the user clicked any position on the map.",[13,2818,2819],{},"You remember obtaining from click event, don't you? Applay it.",[2821,2822,2823,2826,2829,2832],"ol",{},[136,2824,2825],{},"Obtain latitude and longitude from clicked position.",[136,2827,2828],{},"Convert them to Google Map Coordinate instance.",[136,2830,2831],{},"Add the coordinate (path) to the line instance.",[136,2833,2834],{},"Execute it every clicking.",[13,2836,2837,2840],{},[44,2838,2839],{},"drawLine"," method I add to click event is below.",[37,2842,2844],{"className":251,"code":2843,"filename":253,"language":254,"meta":42,"style":42},"data(){\n  return{\n    map:undefined,\n    bounds:undefined,\n    path:[],\n    line:undefined\n  }\n},\nmethods:{\n  drawLine(mapEvent){\n    let latLng = mapEvent.latLng;\n\n    \u002F\u002F click 1st point\n    if(this.line === undefined){\n      const newLine = new this.$gm.Polyline({\n        path:[latLng],\n        geodesic: true,\n        strokeColor: \"#FF0000\",\n        strokeOpacity: 1.0,\n        strokeWeight: 2,\n      })\n      newLine.setMap(this.map);\n      this.path.push(latLng);\n      this.line = newLine;\n      return;\n    }\n\n    \u002F\u002F click second and later point\n    this.path.push(latLng);\n    this.line.setPath([...this.path]);\n    return;\n  },\n},\n",[44,2845,2846,2855,2862,2869,2876,2888,2895,2899,2903,2911,2924,2942,2946,2951,2973,2997,3014,3025,3040,3051,3062,3069,3088,3109,3121,3127,3131,3135,3140,3158,3182,3188,3192],{"__ignoreMap":42},[47,2847,2848,2851,2853],{"class":49,"line":50},[47,2849,2850],{"class":335},"data",[47,2852,2070],{"class":265},[47,2854,342],{"class":272},[47,2856,2857,2860],{"class":49,"line":56},[47,2858,2859],{"class":261},"  return",[47,2861,342],{"class":272},[47,2863,2864,2867],{"class":49,"line":4},[47,2865,2866],{"class":884},"    map",[47,2868,1627],{"class":272},[47,2870,2871,2874],{"class":49,"line":68},[47,2872,2873],{"class":884},"    bounds",[47,2875,1627],{"class":272},[47,2877,2878,2881,2883,2886],{"class":49,"line":74},[47,2879,2880],{"class":884},"    path",[47,2882,350],{"class":272},[47,2884,2885],{"class":884},"[]",[47,2887,366],{"class":272},[47,2889,2890,2893],{"class":49,"line":80},[47,2891,2892],{"class":884},"    line",[47,2894,2094],{"class":272},[47,2896,2897],{"class":49,"line":85},[47,2898,1764],{"class":272},[47,2900,2901],{"class":49,"line":91},[47,2902,2421],{"class":272},[47,2904,2905,2908],{"class":49,"line":97},[47,2906,2907],{"class":1377},"methods",[47,2909,2910],{"class":272},":{\n",[47,2912,2913,2916,2918,2920,2922],{"class":49,"line":102},[47,2914,2915],{"class":335},"  drawLine",[47,2917,339],{"class":884},[47,2919,2120],{"class":265},[47,2921,374],{"class":884},[47,2923,342],{"class":272},[47,2925,2926,2929,2932,2934,2936,2938,2940],{"class":49,"line":108},[47,2927,2928],{"class":357},"    let",[47,2930,2931],{"class":265}," latLng",[47,2933,1654],{"class":272},[47,2935,2162],{"class":265},[47,2937,308],{"class":272},[47,2939,2142],{"class":265},[47,2941,1246],{"class":272},[47,2943,2944],{"class":49,"line":114},[47,2945,65],{"emptyLinePlaceholder":64},[47,2947,2948],{"class":49,"line":481},[47,2949,2950],{"class":1047},"    \u002F\u002F click 1st point\n",[47,2952,2953,2956,2958,2961,2963,2966,2969,2971],{"class":49,"line":487},[47,2954,2955],{"class":261},"    if",[47,2957,339],{"class":884},[47,2959,2960],{"class":272},"this.",[47,2962,49],{"class":265},[47,2964,2965],{"class":272}," ===",[47,2967,2968],{"class":272}," undefined",[47,2970,374],{"class":884},[47,2972,342],{"class":272},[47,2974,2975,2978,2981,2983,2985,2987,2989,2991,2993,2995],{"class":49,"line":493},[47,2976,2977],{"class":357},"      const",[47,2979,2980],{"class":265}," newLine",[47,2982,1654],{"class":272},[47,2984,1657],{"class":272},[47,2986,1660],{"class":272},[47,2988,1663],{"class":265},[47,2990,308],{"class":272},[47,2992,2624],{"class":335},[47,2994,339],{"class":884},[47,2996,342],{"class":272},[47,2998,2999,3002,3004,3007,3009,3012],{"class":49,"line":499},[47,3000,3001],{"class":884},"        path",[47,3003,350],{"class":272},[47,3005,3006],{"class":884},"[",[47,3008,2142],{"class":265},[47,3010,3011],{"class":884},"]",[47,3013,366],{"class":272},[47,3015,3016,3019,3021,3023],{"class":49,"line":505},[47,3017,3018],{"class":884},"        geodesic",[47,3020,350],{"class":272},[47,3022,2698],{"class":322},[47,3024,366],{"class":272},[47,3026,3027,3030,3032,3034,3036,3038],{"class":49,"line":511},[47,3028,3029],{"class":884},"        strokeColor",[47,3031,350],{"class":272},[47,3033,2710],{"class":272},[47,3035,2713],{"class":276},[47,3037,934],{"class":272},[47,3039,366],{"class":272},[47,3041,3042,3045,3047,3049],{"class":49,"line":517},[47,3043,3044],{"class":884},"        strokeOpacity",[47,3046,350],{"class":272},[47,3048,2727],{"class":1707},[47,3050,366],{"class":272},[47,3052,3053,3056,3058,3060],{"class":49,"line":523},[47,3054,3055],{"class":884},"        strokeWeight",[47,3057,350],{"class":272},[47,3059,2739],{"class":1707},[47,3061,366],{"class":272},[47,3063,3064,3067],{"class":49,"line":529},[47,3065,3066],{"class":272},"      }",[47,3068,392],{"class":884},[47,3070,3071,3074,3076,3078,3080,3082,3084,3086],{"class":49,"line":534},[47,3072,3073],{"class":265},"      newLine",[47,3075,308],{"class":272},[47,3077,2757],{"class":335},[47,3079,339],{"class":884},[47,3081,2960],{"class":272},[47,3083,1304],{"class":265},[47,3085,374],{"class":884},[47,3087,1246],{"class":272},[47,3089,3090,3093,3096,3098,3101,3103,3105,3107],{"class":49,"line":540},[47,3091,3092],{"class":272},"      this.",[47,3094,3095],{"class":265},"path",[47,3097,308],{"class":272},[47,3099,3100],{"class":335},"push",[47,3102,339],{"class":884},[47,3104,2142],{"class":265},[47,3106,374],{"class":884},[47,3108,1246],{"class":272},[47,3110,3111,3113,3115,3117,3119],{"class":49,"line":545},[47,3112,3092],{"class":272},[47,3114,49],{"class":265},[47,3116,1654],{"class":272},[47,3118,2980],{"class":265},[47,3120,1246],{"class":272},[47,3122,3123,3125],{"class":49,"line":550},[47,3124,2077],{"class":261},[47,3126,1246],{"class":272},[47,3128,3129],{"class":49,"line":555},[47,3130,587],{"class":272},[47,3132,3133],{"class":49,"line":560},[47,3134,65],{"emptyLinePlaceholder":64},[47,3136,3137],{"class":49,"line":566},[47,3138,3139],{"class":1047},"    \u002F\u002F click second and later point\n",[47,3141,3142,3144,3146,3148,3150,3152,3154,3156],{"class":49,"line":572},[47,3143,2155],{"class":272},[47,3145,3095],{"class":265},[47,3147,308],{"class":272},[47,3149,3100],{"class":335},[47,3151,339],{"class":884},[47,3153,2142],{"class":265},[47,3155,374],{"class":884},[47,3157,1246],{"class":272},[47,3159,3160,3162,3164,3166,3169,3172,3175,3177,3180],{"class":49,"line":578},[47,3161,2155],{"class":272},[47,3163,49],{"class":265},[47,3165,308],{"class":272},[47,3167,3168],{"class":335},"setPath",[47,3170,3171],{"class":884},"([",[47,3173,3174],{"class":272},"...this.",[47,3176,3095],{"class":265},[47,3178,3179],{"class":884},"])",[47,3181,1246],{"class":272},[47,3183,3184,3186],{"class":49,"line":584},[47,3185,1617],{"class":261},[47,3187,1246],{"class":272},[47,3189,3190],{"class":49,"line":590},[47,3191,1636],{"class":272},[47,3193,3194],{"class":49,"line":596},[47,3195,2421],{"class":272},[13,3197,3198,3199,3202,3203,3205,3206,3209,3210,3213],{},"When first clicking, create the instance and store it into ",[44,3200,3201],{},"data()",". Insert coordinate data to ",[44,3204,3095],{}," every clicking. And expand the path array with ",[44,3207,3208],{},"this.line.setPath([...this.path])"," and update instance's path. So it will draw the line from point to point with every click. I have written the character ",[17,3211,3212],{},"VALUE"," on the map with one line (^^).",[122,3215],{":src":3216,":width":125},"'_mix\u002Fscp-2021-03-10-21.42.12-768x408.png'",[13,3218,3219],{},"If you reset the last path, that will be an undo function. If you change any path, also will be line editing function. Google Map API has many other functions to make the rich map.",[29,3221,3223],{"id":3222},"is-not-vue-needed","Is not Vue needed??",[13,3225,3226],{},"Yes. You can make it without vue.js. Most functions are developed with Object and methods of Google map javascript api. So you can make it only with Vanilla.js. But because I have developed app with vue.js, I just used it.",[29,3228,3230],{"id":3229},"lets-try-othe-functions","Let's try othe functions!",[13,3232,3233],{},"Google Map API has any other functions. Examples, adding the maker or custom design maker and also inserting DOM element to the map. If saving these rendering data (path or maker position) as JSON and store in DB, we can create sharing map application as an example. I will try and research Google Map API. Thank you for your reading!",[766,3235,3236],{},"html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .sbqyR, html code.shiki .sbqyR{--shiki-default:#FF9CAC}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}",{"title":42,"searchDepth":4,"depth":4,"links":3238},[3239,3240,3244,3245,3246,3247,3248,3249],{"id":808,"depth":56,"text":809},{"id":838,"depth":56,"text":839,"children":3241},[3242,3243],{"id":857,"depth":4,"text":858},{"id":1213,"depth":4,"text":1214},{"id":1474,"depth":56,"text":1475},{"id":1933,"depth":56,"text":1934},{"id":2433,"depth":56,"text":2434},{"id":2812,"depth":56,"text":2813},{"id":3222,"depth":56,"text":3223},{"id":3229,"depth":56,"text":3230},[783],"Drawing routes on Google Map with Google Maps API and Vue.js",{},"\u002Fen\u002Farticles\u002Fgoogle-map-vuejs",{"title":800,"description":3251},"en\u002Farticles\u002Fgoogle-map-vuejs",[794,277],"_mix\u002Fscp-2021-03-10-21.42.12-768x408.png","e3OhGlnl1sX9IYuWMsptHFjFwBdJSkLcFZlc_d3i3s4",{"id":3260,"title":3261,"body":3262,"category":7369,"createdAt":796,"description":3261,"extension":786,"index":796,"meta":7370,"navigation":64,"path":7371,"publish":64,"seo":7372,"series":796,"seriesTitle":796,"stem":7373,"tag":7374,"thumbnail":7375,"updatedAt":796,"__hash__":7376},"en_articles\u002Fen\u002Farticles\u002Fjs-canvas-wave.md","How to make wave animation at bottom of the image with canvas",{"type":10,"value":3263,"toc":7346},[3264,3267,3270,3278,3282,3285,3296,3300,3308,3311,3314,3317,3320,3337,3340,3344,3347,3351,3354,3363,3366,3620,3623,3627,3630,3918,3921,3981,3984,4179,4189,4205,4208,4211,4215,4225,4286,4289,4292,4318,4321,4402,4408,4415,4421,4424,4428,4434,5112,5115,5126,5129,5133,5244,5250,5254,5260,5575,5578,5598,5607,5610,5614,5682,5693,5698,5700,5710,5713,5717,5918,5921,5928,5954,5957,5981,5985,5988,6026,6039,6042,6044,6048,6057,6166,6176,6185,6225,6229,6232,7245,7249,7252,7321,7336,7340,7343],[13,3265,3266],{},"Hello developers! Thank you for reading my article. Today, I explain how to make animation with canvas as below.\nResponsive is not supported , but you can make it with only 70 lines of javascript.",[122,3268],{":src":3269,":width":125},"'_mix\u002Fex01-768x299.png'",[13,3271,3272,3277],{},[814,3273,3276],{"href":3274,"rel":3275},"https:\u002F\u002Fapps.jun-app.com\u002Fwave\u002F",[818],"Here,"," you can check it.",[29,3279,3281],{"id":3280},"required-knowledge","Required knowledge",[13,3283,3284],{},"Before explaining detail, let's check the required knowledge and principle about web canvas animation. If you well know, skip this section.",[133,3286,3287,3290,3293],{},[136,3288,3289],{},"how to set canvas with js",[136,3291,3292],{},"how to render image on canvas with js",[136,3294,3295],{},"Trigonometric function（very basic）",[29,3297,3299],{"id":3298},"principle-of-canvas-animation","Principle of canvas animation",[13,3301,3302,3303,3307],{},"You can check the sample ",[814,3304,3306],{"href":3274,"rel":3305},[818],"here",", the animation is running correctly and I don't use movie. This animation is played on canvas element with javascript.",[13,3309,3310],{},"Waving images is difficult for using only div tag or img tag. The animation needs canvas element.",[13,3312,3313],{},"Animation is doing \"Erase the image, redraw, erase, redraw ...\" at an invisible speed. Also, js draws after erasing the bottom of the image with a transparent wavy line. And to make the wave look like it is flowing, I use a trigonometric function to calculate the part to be erased in a wavy shape.",[13,3315,3316],{},"It is hard to understand, so let's make figures.",[122,3318],{":src":3319,":width":125},"'_mix\u002Fwave01.jpeg'",[133,3321,3322,3325,3328,3331,3334],{},[136,3323,3324],{},"Specify the drawing point as indicated by the orange dot in coordinates（１）",[136,3326,3327],{},"Specify the drawing other points with trigonometric function.（２）",[136,3329,3330],{},"When the point arrive at edge of image, back it to first place. （３、４）",[136,3332,3333],{},"You can fill srrounded area with any colors, so fill transparently.（５）",[136,3335,3336],{},"Rerender image as soon and do 1~5 again.",[13,3338,3339],{},"If you increase θ of sin(θ) each 1~6 process is repeated, it looks like a different wave swells each time. Implement the wave animation in this way.",[149,3341,3343],{"id":3342},"what-is-canvas","What is canvas?",[13,3345,3346],{},"Canvas is one of the HTML5 elements. It can draw 2D shapes, graphics and animation with javaScript. It makes complex animation and shapes.",[29,3348,3350],{"id":3349},"render-image-on-canvas","Render image on canvas",[13,3352,3353],{},"At first, let's display image on canvas element. This time, put the below files at the same level.",[133,3355,3356,3358,3360],{},[136,3357,864],{},[136,3359,404],{},[136,3361,3362],{},"sample.jpg",[13,3364,3365],{},"sample.jpg is trimed with 1:2 (verical:horizon).Yeah, let's develop! First step, create HTML as below.",[37,3367,3369],{"className":871,"code":3368,"language":874,"meta":42,"style":42},"\u003C!DOCTYPE html>\n\u003Chtml>\n    \u003Chead>\n        \u003Cmeta charset=\"utf-8\">\n        \u003Ctitle>waving image\u003C\u002Ftitle>\n        \u003Cstyle>\n            *{\n                margin:0;\n                padding:0;\n            }\n            main{\n                background:rgb(240, 255, 255);;\n            }\n        \u003C\u002Fstyle>\n    \u003C\u002Fhead>\n    \u003Cbody>\n        \u003Cmain>\n            \u003Ccanvas id=\"canvas\">\u003C\u002Fcanvas>\n        \u003C\u002Fmain>\n        \u003Cscript src=\".\u002Fapp.js\">\u003C\u002Fscript>\n    \u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[44,3370,3371,3381,3389,3397,3416,3433,3441,3448,3461,3472,3477,3484,3511,3515,3524,3532,3540,3549,3573,3581,3604,3612],{"__ignoreMap":42},[47,3372,3373,3375,3377,3379],{"class":49,"line":50},[47,3374,881],{"class":272},[47,3376,885],{"class":884},[47,3378,888],{"class":357},[47,3380,891],{"class":272},[47,3382,3383,3385,3387],{"class":49,"line":56},[47,3384,896],{"class":272},[47,3386,874],{"class":884},[47,3388,891],{"class":272},[47,3390,3391,3393,3395],{"class":49,"line":4},[47,3392,923],{"class":272},[47,3394,916],{"class":884},[47,3396,891],{"class":272},[47,3398,3399,3402,3404,3406,3408,3410,3412,3414],{"class":49,"line":68},[47,3400,3401],{"class":272},"        \u003C",[47,3403,926],{"class":884},[47,3405,929],{"class":357},[47,3407,319],{"class":272},[47,3409,934],{"class":272},[47,3411,937],{"class":276},[47,3413,934],{"class":272},[47,3415,891],{"class":272},[47,3417,3418,3420,3422,3424,3427,3429,3431],{"class":49,"line":74},[47,3419,3401],{"class":272},[47,3421,1087],{"class":884},[47,3423,1090],{"class":272},[47,3425,3426],{"class":265},"waving image",[47,3428,1096],{"class":272},[47,3430,1087],{"class":884},[47,3432,891],{"class":272},[47,3434,3435,3437,3439],{"class":49,"line":80},[47,3436,3401],{"class":272},[47,3438,766],{"class":884},[47,3440,891],{"class":272},[47,3442,3443,3446],{"class":49,"line":85},[47,3444,3445],{"class":1377},"            *",[47,3447,342],{"class":272},[47,3449,3450,3454,3456,3459],{"class":49,"line":91},[47,3451,3453],{"class":3452},"s6YsC","                margin",[47,3455,350],{"class":272},[47,3457,3458],{"class":1707},"0",[47,3460,1246],{"class":272},[47,3462,3463,3466,3468,3470],{"class":49,"line":97},[47,3464,3465],{"class":3452},"                padding",[47,3467,350],{"class":272},[47,3469,3458],{"class":1707},[47,3471,1246],{"class":272},[47,3473,3474],{"class":49,"line":102},[47,3475,3476],{"class":272},"            }\n",[47,3478,3479,3482],{"class":49,"line":108},[47,3480,3481],{"class":1377},"            main",[47,3483,342],{"class":272},[47,3485,3486,3489,3491,3494,3496,3499,3501,3504,3506,3508],{"class":49,"line":114},[47,3487,3488],{"class":3452},"                background",[47,3490,350],{"class":272},[47,3492,3493],{"class":335},"rgb",[47,3495,339],{"class":272},[47,3497,3498],{"class":1707},"240",[47,3500,1711],{"class":272},[47,3502,3503],{"class":1707}," 255",[47,3505,1711],{"class":272},[47,3507,3503],{"class":1707},[47,3509,3510],{"class":272},");;\n",[47,3512,3513],{"class":49,"line":481},[47,3514,3476],{"class":272},[47,3516,3517,3520,3522],{"class":49,"line":487},[47,3518,3519],{"class":272},"        \u003C\u002F",[47,3521,766],{"class":884},[47,3523,891],{"class":272},[47,3525,3526,3528,3530],{"class":49,"line":493},[47,3527,1150],{"class":272},[47,3529,916],{"class":884},[47,3531,891],{"class":272},[47,3533,3534,3536,3538],{"class":49,"line":499},[47,3535,923],{"class":272},[47,3537,1116],{"class":884},[47,3539,891],{"class":272},[47,3541,3542,3544,3547],{"class":49,"line":505},[47,3543,3401],{"class":272},[47,3545,3546],{"class":884},"main",[47,3548,891],{"class":272},[47,3550,3551,3554,3557,3559,3561,3563,3565,3567,3569,3571],{"class":49,"line":511},[47,3552,3553],{"class":272},"            \u003C",[47,3555,3556],{"class":884},"canvas",[47,3558,1164],{"class":357},[47,3560,319],{"class":272},[47,3562,934],{"class":272},[47,3564,3556],{"class":276},[47,3566,934],{"class":272},[47,3568,1070],{"class":272},[47,3570,3556],{"class":884},[47,3572,891],{"class":272},[47,3574,3575,3577,3579],{"class":49,"line":517},[47,3576,3519],{"class":272},[47,3578,3546],{"class":884},[47,3580,891],{"class":272},[47,3582,3583,3585,3587,3589,3591,3593,3596,3598,3600,3602],{"class":49,"line":523},[47,3584,3401],{"class":272},[47,3586,1055],{"class":884},[47,3588,1058],{"class":357},[47,3590,319],{"class":272},[47,3592,934],{"class":272},[47,3594,3595],{"class":276},".\u002Fapp.js",[47,3597,934],{"class":272},[47,3599,1070],{"class":272},[47,3601,1055],{"class":884},[47,3603,891],{"class":272},[47,3605,3606,3608,3610],{"class":49,"line":529},[47,3607,1150],{"class":272},[47,3609,1116],{"class":884},[47,3611,891],{"class":272},[47,3613,3614,3616,3618],{"class":49,"line":534},[47,3615,1096],{"class":272},[47,3617,874],{"class":884},[47,3619,891],{"class":272},[13,3621,3622],{},"Prepare canvas element which has id to detect with javascript.　Next step, write js file.",[149,3624,3626],{"id":3625},"get-target-canvas-element-by-javascript","Get target canvas element by Javascript",[13,3628,3629],{},"Write app.js code as below.",[37,3631,3633],{"className":251,"code":3632,"language":254,"meta":42,"style":42},"function initAnimation(){\n    var canvas = document.getElementById('canvas');\n    var ctx = canvas.getContext('2d');\n\n    var imagePath = ('.\u002Fsample.jpg');\n    var image = new Image();\n    image.src = imagePath;\n\n    canvas.width = Number(window.innerWidth);\n    canvas.height = Number(canvas.width\u002F2);\n    image.onload = function(){\n          ctx.drawImage(image,0,0,image.width,image.height,0,0,canvas.width,canvas.height);\n    }\n}\n",[44,3634,3635,3645,3674,3703,3707,3730,3748,3764,3768,3796,3827,3843,3910,3914],{"__ignoreMap":42},[47,3636,3637,3640,3643],{"class":49,"line":50},[47,3638,3639],{"class":357},"function",[47,3641,3642],{"class":335}," initAnimation",[47,3644,1612],{"class":272},[47,3646,3647,3650,3653,3655,3658,3660,3662,3664,3666,3668,3670,3672],{"class":49,"line":56},[47,3648,3649],{"class":357},"    var",[47,3651,3652],{"class":265}," canvas",[47,3654,1654],{"class":272},[47,3656,3657],{"class":265}," document",[47,3659,308],{"class":272},[47,3661,1297],{"class":335},[47,3663,339],{"class":884},[47,3665,384],{"class":272},[47,3667,3556],{"class":276},[47,3669,384],{"class":272},[47,3671,374],{"class":884},[47,3673,1246],{"class":272},[47,3675,3676,3678,3681,3683,3685,3687,3690,3692,3694,3697,3699,3701],{"class":49,"line":4},[47,3677,3649],{"class":357},[47,3679,3680],{"class":265}," ctx",[47,3682,1654],{"class":272},[47,3684,3652],{"class":265},[47,3686,308],{"class":272},[47,3688,3689],{"class":335},"getContext",[47,3691,339],{"class":884},[47,3693,384],{"class":272},[47,3695,3696],{"class":276},"2d",[47,3698,384],{"class":272},[47,3700,374],{"class":884},[47,3702,1246],{"class":272},[47,3704,3705],{"class":49,"line":68},[47,3706,65],{"emptyLinePlaceholder":64},[47,3708,3709,3711,3714,3716,3719,3721,3724,3726,3728],{"class":49,"line":74},[47,3710,3649],{"class":357},[47,3712,3713],{"class":265}," imagePath",[47,3715,1654],{"class":272},[47,3717,3718],{"class":884}," (",[47,3720,384],{"class":272},[47,3722,3723],{"class":276},".\u002Fsample.jpg",[47,3725,384],{"class":272},[47,3727,374],{"class":884},[47,3729,1246],{"class":272},[47,3731,3732,3734,3737,3739,3741,3744,3746],{"class":49,"line":80},[47,3733,3649],{"class":357},[47,3735,3736],{"class":265}," image",[47,3738,1654],{"class":272},[47,3740,1657],{"class":272},[47,3742,3743],{"class":335}," Image",[47,3745,2070],{"class":884},[47,3747,1246],{"class":272},[47,3749,3750,3753,3755,3758,3760,3762],{"class":49,"line":85},[47,3751,3752],{"class":265},"    image",[47,3754,308],{"class":272},[47,3756,3757],{"class":265},"src",[47,3759,1654],{"class":272},[47,3761,3713],{"class":265},[47,3763,1246],{"class":272},[47,3765,3766],{"class":49,"line":91},[47,3767,65],{"emptyLinePlaceholder":64},[47,3769,3770,3773,3775,3778,3780,3783,3785,3787,3789,3792,3794],{"class":49,"line":97},[47,3771,3772],{"class":265},"    canvas",[47,3774,308],{"class":272},[47,3776,3777],{"class":265},"width",[47,3779,1654],{"class":272},[47,3781,3782],{"class":335}," Number",[47,3784,339],{"class":884},[47,3786,1274],{"class":265},[47,3788,308],{"class":272},[47,3790,3791],{"class":265},"innerWidth",[47,3793,374],{"class":884},[47,3795,1246],{"class":272},[47,3797,3798,3800,3802,3805,3807,3809,3811,3813,3815,3817,3820,3823,3825],{"class":49,"line":102},[47,3799,3772],{"class":265},[47,3801,308],{"class":272},[47,3803,3804],{"class":265},"height",[47,3806,1654],{"class":272},[47,3808,3782],{"class":335},[47,3810,339],{"class":884},[47,3812,3556],{"class":265},[47,3814,308],{"class":272},[47,3816,3777],{"class":265},[47,3818,3819],{"class":272},"\u002F",[47,3821,3822],{"class":1707},"2",[47,3824,374],{"class":884},[47,3826,1246],{"class":272},[47,3828,3829,3831,3833,3836,3838,3841],{"class":49,"line":108},[47,3830,3752],{"class":265},[47,3832,308],{"class":272},[47,3834,3835],{"class":335},"onload",[47,3837,1654],{"class":272},[47,3839,3840],{"class":357}," function",[47,3842,1612],{"class":272},[47,3844,3845,3848,3850,3853,3855,3858,3860,3862,3864,3866,3868,3870,3872,3874,3876,3878,3880,3882,3884,3886,3888,3890,3892,3894,3896,3898,3900,3902,3904,3906,3908],{"class":49,"line":114},[47,3846,3847],{"class":265},"          ctx",[47,3849,308],{"class":272},[47,3851,3852],{"class":335},"drawImage",[47,3854,339],{"class":884},[47,3856,3857],{"class":265},"image",[47,3859,1711],{"class":272},[47,3861,3458],{"class":1707},[47,3863,1711],{"class":272},[47,3865,3458],{"class":1707},[47,3867,1711],{"class":272},[47,3869,3857],{"class":265},[47,3871,308],{"class":272},[47,3873,3777],{"class":265},[47,3875,1711],{"class":272},[47,3877,3857],{"class":265},[47,3879,308],{"class":272},[47,3881,3804],{"class":265},[47,3883,1711],{"class":272},[47,3885,3458],{"class":1707},[47,3887,1711],{"class":272},[47,3889,3458],{"class":1707},[47,3891,1711],{"class":272},[47,3893,3556],{"class":265},[47,3895,308],{"class":272},[47,3897,3777],{"class":265},[47,3899,1711],{"class":272},[47,3901,3556],{"class":265},[47,3903,308],{"class":272},[47,3905,3804],{"class":265},[47,3907,374],{"class":884},[47,3909,1246],{"class":272},[47,3911,3912],{"class":49,"line":481},[47,3913,587],{"class":272},[47,3915,3916],{"class":49,"line":487},[47,3917,599],{"class":272},[13,3919,3920],{},"This function get canvas element from HTML and context instance to operate with javascript.\nAfter that, various process are made for this ctx (drawing context instance).",[37,3922,3924],{"className":251,"code":3923,"language":254,"meta":42,"style":42},"var canvas = document.getElementById('canvas');\nvar ctx = canvas.getContext('2d');\n",[44,3925,3926,3954],{"__ignoreMap":42},[47,3927,3928,3931,3934,3936,3938,3940,3942,3944,3946,3948,3950,3952],{"class":49,"line":50},[47,3929,3930],{"class":357},"var",[47,3932,3933],{"class":265}," canvas ",[47,3935,319],{"class":272},[47,3937,3657],{"class":265},[47,3939,308],{"class":272},[47,3941,1297],{"class":335},[47,3943,339],{"class":265},[47,3945,384],{"class":272},[47,3947,3556],{"class":276},[47,3949,384],{"class":272},[47,3951,374],{"class":265},[47,3953,1246],{"class":272},[47,3955,3956,3958,3961,3963,3965,3967,3969,3971,3973,3975,3977,3979],{"class":49,"line":56},[47,3957,3930],{"class":357},[47,3959,3960],{"class":265}," ctx ",[47,3962,319],{"class":272},[47,3964,3652],{"class":265},[47,3966,308],{"class":272},[47,3968,3689],{"class":335},[47,3970,339],{"class":265},[47,3972,384],{"class":272},[47,3974,3696],{"class":276},[47,3976,384],{"class":272},[47,3978,374],{"class":265},[47,3980,1246],{"class":272},[13,3982,3983],{},"and",[37,3985,3987],{"className":251,"code":3986,"language":254,"meta":42,"style":42},"var imagePath = ('.\u002Fsample.jpg');\nvar image = new Image();\nimage.src = imagePath;\n\ncanvas.width = Number(window.innerWidth);\ncanvas.height = Number(canvas.width\u002F2);\nimage.onload = function(){\n        ctx.drawImage(image,0,0,image.width,image.height,0,0,canvas.width,canvas.height);\n}\n",[44,3988,3989,4010,4027,4042,4046,4068,4096,4110,4175],{"__ignoreMap":42},[47,3990,3991,3993,3996,3998,4000,4002,4004,4006,4008],{"class":49,"line":50},[47,3992,3930],{"class":357},[47,3994,3995],{"class":265}," imagePath ",[47,3997,319],{"class":272},[47,3999,3718],{"class":265},[47,4001,384],{"class":272},[47,4003,3723],{"class":276},[47,4005,384],{"class":272},[47,4007,374],{"class":265},[47,4009,1246],{"class":272},[47,4011,4012,4014,4017,4019,4021,4023,4025],{"class":49,"line":56},[47,4013,3930],{"class":357},[47,4015,4016],{"class":265}," image ",[47,4018,319],{"class":272},[47,4020,1657],{"class":272},[47,4022,3743],{"class":335},[47,4024,2070],{"class":265},[47,4026,1246],{"class":272},[47,4028,4029,4031,4033,4036,4038,4040],{"class":49,"line":4},[47,4030,3857],{"class":265},[47,4032,308],{"class":272},[47,4034,4035],{"class":265},"src ",[47,4037,319],{"class":272},[47,4039,3713],{"class":265},[47,4041,1246],{"class":272},[47,4043,4044],{"class":49,"line":68},[47,4045,65],{"emptyLinePlaceholder":64},[47,4047,4048,4050,4052,4055,4057,4059,4061,4063,4066],{"class":49,"line":74},[47,4049,3556],{"class":265},[47,4051,308],{"class":272},[47,4053,4054],{"class":265},"width ",[47,4056,319],{"class":272},[47,4058,3782],{"class":335},[47,4060,1238],{"class":265},[47,4062,308],{"class":272},[47,4064,4065],{"class":265},"innerWidth)",[47,4067,1246],{"class":272},[47,4069,4070,4072,4074,4077,4079,4081,4084,4086,4088,4090,4092,4094],{"class":49,"line":80},[47,4071,3556],{"class":265},[47,4073,308],{"class":272},[47,4075,4076],{"class":265},"height ",[47,4078,319],{"class":272},[47,4080,3782],{"class":335},[47,4082,4083],{"class":265},"(canvas",[47,4085,308],{"class":272},[47,4087,3777],{"class":265},[47,4089,3819],{"class":272},[47,4091,3822],{"class":1707},[47,4093,374],{"class":265},[47,4095,1246],{"class":272},[47,4097,4098,4100,4102,4104,4106,4108],{"class":49,"line":85},[47,4099,3857],{"class":265},[47,4101,308],{"class":272},[47,4103,3835],{"class":335},[47,4105,1654],{"class":272},[47,4107,3840],{"class":357},[47,4109,1612],{"class":272},[47,4111,4112,4115,4117,4119,4121,4123,4125,4127,4129,4131,4133,4135,4137,4139,4141,4143,4145,4147,4149,4151,4153,4155,4157,4159,4161,4163,4165,4167,4169,4171,4173],{"class":49,"line":91},[47,4113,4114],{"class":265},"        ctx",[47,4116,308],{"class":272},[47,4118,3852],{"class":335},[47,4120,339],{"class":884},[47,4122,3857],{"class":265},[47,4124,1711],{"class":272},[47,4126,3458],{"class":1707},[47,4128,1711],{"class":272},[47,4130,3458],{"class":1707},[47,4132,1711],{"class":272},[47,4134,3857],{"class":265},[47,4136,308],{"class":272},[47,4138,3777],{"class":265},[47,4140,1711],{"class":272},[47,4142,3857],{"class":265},[47,4144,308],{"class":272},[47,4146,3804],{"class":265},[47,4148,1711],{"class":272},[47,4150,3458],{"class":1707},[47,4152,1711],{"class":272},[47,4154,3458],{"class":1707},[47,4156,1711],{"class":272},[47,4158,3556],{"class":265},[47,4160,308],{"class":272},[47,4162,3777],{"class":265},[47,4164,1711],{"class":272},[47,4166,3556],{"class":265},[47,4168,308],{"class":272},[47,4170,3804],{"class":265},[47,4172,374],{"class":884},[47,4174,1246],{"class":272},[47,4176,4177],{"class":49,"line":97},[47,4178,599],{"class":272},[13,4180,4181,4182,405,4185,4188],{},"Set image's path to src property using Image Object. Set canvas size with ",[44,4183,4184],{},"canvas.width",[44,4186,4187],{},"canvas.height",". So image ratio is 1:2, make canvas's ratio same.",[13,4190,4191,4194,4195,4198,4199,4201,4202,4204],{},[44,4192,4193],{},"image.onload"," run callback after image loaded.\n",[44,4196,4197],{},"drawImage()"," method renders image on canvas。\n",[44,4200,4197],{}," must be run after ",[44,4203,4193],{}," to set image.",[13,4206,4207],{},"Anyway, run script. Image will be rendered even you don't use img tag.",[122,4209],{":src":4210,":width":753,":center":754},"'_mix\u002Fwave02.png'",[214,4212,4214],{"id":4213},"how-to-use-drawimage","How to use drawImage()",[13,4216,4217,4219,4220],{},[44,4218,4197],{}," draws image on canvas specify range. If you render image at whole canvas, you should enter all arguments.",[814,4221,4224],{"href":4222,"rel":4223},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FCanvasRenderingContext2D\u002FdrawImage",[818],"（MDN）",[37,4226,4228],{"className":251,"code":4227,"language":254,"meta":42,"style":42},"void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);\n",[44,4229,4230],{"__ignoreMap":42},[47,4231,4232,4235,4237,4239,4241,4244,4246,4249,4251,4254,4256,4259,4261,4264,4266,4269,4271,4274,4276,4279,4281,4284],{"class":49,"line":50},[47,4233,4234],{"class":272},"void",[47,4236,3680],{"class":265},[47,4238,308],{"class":272},[47,4240,3852],{"class":335},[47,4242,4243],{"class":265},"(image",[47,4245,1711],{"class":272},[47,4247,4248],{"class":265}," sx",[47,4250,1711],{"class":272},[47,4252,4253],{"class":265}," sy",[47,4255,1711],{"class":272},[47,4257,4258],{"class":265}," sWidth",[47,4260,1711],{"class":272},[47,4262,4263],{"class":265}," sHeight",[47,4265,1711],{"class":272},[47,4267,4268],{"class":265}," dx",[47,4270,1711],{"class":272},[47,4272,4273],{"class":265}," dy",[47,4275,1711],{"class":272},[47,4277,4278],{"class":265}," dWidth",[47,4280,1711],{"class":272},[47,4282,4283],{"class":265}," dHeight)",[47,4285,1246],{"class":272},[13,4287,4288],{},"Let me explain about arguments.",[13,4290,4291],{},"Image instance as well target image.",[2821,4293,4294,4297,4300,4303,4306,4309,4312,4315],{},[136,4295,4296],{},"X coordinate of the image cropping start point",[136,4298,4299],{},"Y coordinate of the image cropping start point",[136,4301,4302],{},"Distance in the X direction to cut out from the X coordinate specified by the second argument（width）",[136,4304,4305],{},"Distance in the Y direction to cut out from the Y coordinate specified by the third argument（height）",[136,4307,4308],{},"X coordinate of the starting point to draw on canvas.",[136,4310,4311],{},"Y coordinate of the starting point to draw on canvas",[136,4313,4314],{},"Distance in the X direction to draw from the X coordinate specified by the 6th argument（width）",[136,4316,4317],{},"Distance (height) in the Y direction to draw from the Y coordinate specified by the 7th argument（height）",[13,4319,4320],{},"Like this.\nIn my example this time,",[37,4322,4324],{"className":251,"code":4323,"language":254,"meta":42,"style":42},"ctx.drawImage(\n    image,\n    0,0,image.width,image.height,\n    0,0,canvas.width,canvas.height\n);\n",[44,4325,4326,4338,4344,4371,4396],{"__ignoreMap":42},[47,4327,4328,4331,4333,4335],{"class":49,"line":50},[47,4329,4330],{"class":265},"ctx",[47,4332,308],{"class":272},[47,4334,3852],{"class":335},[47,4336,4337],{"class":265},"(\n",[47,4339,4340,4342],{"class":49,"line":56},[47,4341,3752],{"class":265},[47,4343,366],{"class":272},[47,4345,4346,4349,4351,4353,4355,4357,4359,4361,4363,4365,4367,4369],{"class":49,"line":4},[47,4347,4348],{"class":1707},"    0",[47,4350,1711],{"class":272},[47,4352,3458],{"class":1707},[47,4354,1711],{"class":272},[47,4356,3857],{"class":265},[47,4358,308],{"class":272},[47,4360,3777],{"class":265},[47,4362,1711],{"class":272},[47,4364,3857],{"class":265},[47,4366,308],{"class":272},[47,4368,3804],{"class":265},[47,4370,366],{"class":272},[47,4372,4373,4375,4377,4379,4381,4383,4385,4387,4389,4391,4393],{"class":49,"line":68},[47,4374,4348],{"class":1707},[47,4376,1711],{"class":272},[47,4378,3458],{"class":1707},[47,4380,1711],{"class":272},[47,4382,3556],{"class":265},[47,4384,308],{"class":272},[47,4386,3777],{"class":265},[47,4388,1711],{"class":272},[47,4390,3556],{"class":265},[47,4392,308],{"class":272},[47,4394,4395],{"class":265},"height\n",[47,4397,4398,4400],{"class":49,"line":74},[47,4399,374],{"class":265},[47,4401,1246],{"class":272},[13,4403,4404,4407],{},[44,4405,4406],{},"0,0,image.width,image.height"," cut image from (0,0) coordinate point of the image by the image's width and height. That same as to cut whole image.",[13,4409,4410,4411,4414],{},"If you set ",[44,4412,4413],{},"0,0,image.width\u002F2,image.height\u002F2",", canvas displays 1\u002F4 size of original image.",[13,4416,4417,4420],{},[44,4418,4419],{},"0,0,canvas.width,canvas.height"," paste the image on canvas from (0,0) coordinate point by the canvas's width and height.",[13,4422,4423],{},"When you change ratio on code, you will well understand what I write above.",[29,4425,4427],{"id":4426},"cut-image-by-wave-shape","Cut image by wave shape",[13,4429,4430,4431,4433],{},"Let's cut image by wave shape. As I explained previwe of cutting above, draw square image which bottom line is wave shape and fill there transparent. Add below codes to ",[44,4432,4193],{}," function.",[37,4435,4437],{"className":251,"code":4436,"language":254,"meta":42,"style":42},"image.onload = function(){\n    initDraw();\n}\n    \nvar canvasEndX = canvas.width;\nvar canvasEndY = canvas.height;\nvar waveStartPoint = canvasEndY-150;\n\nvar amplitude = 30;\nvar period = 1000;\nvar degree = 0;\n\nfunction initDraw(){\n    imageSet(image,canvasEndX,canvasEndY);\n    waveDrawing(waveStartPoint,canvasEndX,canvasEndY,degree,amplitude,period);\n}\n\nfunction imageSet(imageObj,canvasEndX,canvasEndY){\n    var imgWidth = imageObj.width;\n    var imgHeight = imageObj.height;\n    ctx.drawImage(image,0,0,imgWidth,imgHeight,0,0,canvasEndX,canvasEndY);\n}\n\nfunction waveDrawing(waveStartPoint,canvasEndX,canvasEndY,deg,am,tp){\n    var waveStartY = waveStartPoint;\n    ctx.globalCompositeOperation = \"destination-out\";\n    ctx.beginPath();\n    ctx.moveTo(0, waveStartY);\n\n    for (var x=0; x \u003C= canvasEndX; x+= 1) {\n        var y = -am*Math.sin((Math.PI\u002Ftp)*(deg+x));\n        ctx.lineTo(x, y+waveStartY);\n    }\n\n    ctx.lineTo(canvasEndX,canvasEndY);\n    ctx.lineTo(0,canvasEndY);\n    ctx.closePath();\n\n    　ctx.fillStyle = \"rgba(255,255,255,1)\"; \u002F\u002Fopacity 1\n    ctx.fill();\n}\n",[44,4438,4439,4453,4462,4466,4470,4487,4504,4524,4528,4542,4556,4570,4574,4583,4606,4643,4647,4651,4673,4691,4708,4759,4763,4767,4803,4817,4837,4850,4871,4875,4917,4976,5002,5006,5010,5030,5050,5063,5068,5093,5107],{"__ignoreMap":42},[47,4440,4441,4443,4445,4447,4449,4451],{"class":49,"line":50},[47,4442,3857],{"class":265},[47,4444,308],{"class":272},[47,4446,3835],{"class":335},[47,4448,1654],{"class":272},[47,4450,3840],{"class":357},[47,4452,1612],{"class":272},[47,4454,4455,4458,4460],{"class":49,"line":56},[47,4456,4457],{"class":335},"    initDraw",[47,4459,2070],{"class":884},[47,4461,1246],{"class":272},[47,4463,4464],{"class":49,"line":4},[47,4465,599],{"class":272},[47,4467,4468],{"class":49,"line":68},[47,4469,1042],{"class":265},[47,4471,4472,4474,4477,4479,4481,4483,4485],{"class":49,"line":74},[47,4473,3930],{"class":357},[47,4475,4476],{"class":265}," canvasEndX ",[47,4478,319],{"class":272},[47,4480,3652],{"class":265},[47,4482,308],{"class":272},[47,4484,3777],{"class":265},[47,4486,1246],{"class":272},[47,4488,4489,4491,4494,4496,4498,4500,4502],{"class":49,"line":80},[47,4490,3930],{"class":357},[47,4492,4493],{"class":265}," canvasEndY ",[47,4495,319],{"class":272},[47,4497,3652],{"class":265},[47,4499,308],{"class":272},[47,4501,3804],{"class":265},[47,4503,1246],{"class":272},[47,4505,4506,4508,4511,4513,4516,4519,4522],{"class":49,"line":85},[47,4507,3930],{"class":357},[47,4509,4510],{"class":265}," waveStartPoint ",[47,4512,319],{"class":272},[47,4514,4515],{"class":265}," canvasEndY",[47,4517,4518],{"class":272},"-",[47,4520,4521],{"class":1707},"150",[47,4523,1246],{"class":272},[47,4525,4526],{"class":49,"line":91},[47,4527,65],{"emptyLinePlaceholder":64},[47,4529,4530,4532,4535,4537,4540],{"class":49,"line":97},[47,4531,3930],{"class":357},[47,4533,4534],{"class":265}," amplitude ",[47,4536,319],{"class":272},[47,4538,4539],{"class":1707}," 30",[47,4541,1246],{"class":272},[47,4543,4544,4546,4549,4551,4554],{"class":49,"line":102},[47,4545,3930],{"class":357},[47,4547,4548],{"class":265}," period ",[47,4550,319],{"class":272},[47,4552,4553],{"class":1707}," 1000",[47,4555,1246],{"class":272},[47,4557,4558,4560,4563,4565,4568],{"class":49,"line":108},[47,4559,3930],{"class":357},[47,4561,4562],{"class":265}," degree ",[47,4564,319],{"class":272},[47,4566,4567],{"class":1707}," 0",[47,4569,1246],{"class":272},[47,4571,4572],{"class":49,"line":114},[47,4573,65],{"emptyLinePlaceholder":64},[47,4575,4576,4578,4581],{"class":49,"line":481},[47,4577,3639],{"class":357},[47,4579,4580],{"class":335}," initDraw",[47,4582,1612],{"class":272},[47,4584,4585,4588,4590,4592,4594,4597,4599,4602,4604],{"class":49,"line":487},[47,4586,4587],{"class":335},"    imageSet",[47,4589,339],{"class":884},[47,4591,3857],{"class":265},[47,4593,1711],{"class":272},[47,4595,4596],{"class":265},"canvasEndX",[47,4598,1711],{"class":272},[47,4600,4601],{"class":265},"canvasEndY",[47,4603,374],{"class":884},[47,4605,1246],{"class":272},[47,4607,4608,4611,4613,4616,4618,4620,4622,4624,4626,4629,4631,4634,4636,4639,4641],{"class":49,"line":493},[47,4609,4610],{"class":335},"    waveDrawing",[47,4612,339],{"class":884},[47,4614,4615],{"class":265},"waveStartPoint",[47,4617,1711],{"class":272},[47,4619,4596],{"class":265},[47,4621,1711],{"class":272},[47,4623,4601],{"class":265},[47,4625,1711],{"class":272},[47,4627,4628],{"class":265},"degree",[47,4630,1711],{"class":272},[47,4632,4633],{"class":265},"amplitude",[47,4635,1711],{"class":272},[47,4637,4638],{"class":265},"period",[47,4640,374],{"class":884},[47,4642,1246],{"class":272},[47,4644,4645],{"class":49,"line":499},[47,4646,599],{"class":272},[47,4648,4649],{"class":49,"line":505},[47,4650,65],{"emptyLinePlaceholder":64},[47,4652,4653,4655,4658,4660,4663,4665,4667,4669,4671],{"class":49,"line":511},[47,4654,3639],{"class":357},[47,4656,4657],{"class":335}," imageSet",[47,4659,339],{"class":272},[47,4661,4662],{"class":353},"imageObj",[47,4664,1711],{"class":272},[47,4666,4596],{"class":353},[47,4668,1711],{"class":272},[47,4670,4601],{"class":353},[47,4672,2123],{"class":272},[47,4674,4675,4677,4680,4682,4685,4687,4689],{"class":49,"line":517},[47,4676,3649],{"class":357},[47,4678,4679],{"class":265}," imgWidth",[47,4681,1654],{"class":272},[47,4683,4684],{"class":265}," imageObj",[47,4686,308],{"class":272},[47,4688,3777],{"class":265},[47,4690,1246],{"class":272},[47,4692,4693,4695,4698,4700,4702,4704,4706],{"class":49,"line":523},[47,4694,3649],{"class":357},[47,4696,4697],{"class":265}," imgHeight",[47,4699,1654],{"class":272},[47,4701,4684],{"class":265},[47,4703,308],{"class":272},[47,4705,3804],{"class":265},[47,4707,1246],{"class":272},[47,4709,4710,4713,4715,4717,4719,4721,4723,4725,4727,4729,4731,4734,4736,4739,4741,4743,4745,4747,4749,4751,4753,4755,4757],{"class":49,"line":529},[47,4711,4712],{"class":265},"    ctx",[47,4714,308],{"class":272},[47,4716,3852],{"class":335},[47,4718,339],{"class":884},[47,4720,3857],{"class":265},[47,4722,1711],{"class":272},[47,4724,3458],{"class":1707},[47,4726,1711],{"class":272},[47,4728,3458],{"class":1707},[47,4730,1711],{"class":272},[47,4732,4733],{"class":265},"imgWidth",[47,4735,1711],{"class":272},[47,4737,4738],{"class":265},"imgHeight",[47,4740,1711],{"class":272},[47,4742,3458],{"class":1707},[47,4744,1711],{"class":272},[47,4746,3458],{"class":1707},[47,4748,1711],{"class":272},[47,4750,4596],{"class":265},[47,4752,1711],{"class":272},[47,4754,4601],{"class":265},[47,4756,374],{"class":884},[47,4758,1246],{"class":272},[47,4760,4761],{"class":49,"line":534},[47,4762,599],{"class":272},[47,4764,4765],{"class":49,"line":540},[47,4766,65],{"emptyLinePlaceholder":64},[47,4768,4769,4771,4774,4776,4778,4780,4782,4784,4786,4788,4791,4793,4796,4798,4801],{"class":49,"line":545},[47,4770,3639],{"class":357},[47,4772,4773],{"class":335}," waveDrawing",[47,4775,339],{"class":272},[47,4777,4615],{"class":353},[47,4779,1711],{"class":272},[47,4781,4596],{"class":353},[47,4783,1711],{"class":272},[47,4785,4601],{"class":353},[47,4787,1711],{"class":272},[47,4789,4790],{"class":353},"deg",[47,4792,1711],{"class":272},[47,4794,4795],{"class":353},"am",[47,4797,1711],{"class":272},[47,4799,4800],{"class":353},"tp",[47,4802,2123],{"class":272},[47,4804,4805,4807,4810,4812,4815],{"class":49,"line":550},[47,4806,3649],{"class":357},[47,4808,4809],{"class":265}," waveStartY",[47,4811,1654],{"class":272},[47,4813,4814],{"class":265}," waveStartPoint",[47,4816,1246],{"class":272},[47,4818,4819,4821,4823,4826,4828,4830,4833,4835],{"class":49,"line":555},[47,4820,4712],{"class":265},[47,4822,308],{"class":272},[47,4824,4825],{"class":265},"globalCompositeOperation",[47,4827,1654],{"class":272},[47,4829,2710],{"class":272},[47,4831,4832],{"class":276},"destination-out",[47,4834,934],{"class":272},[47,4836,1246],{"class":272},[47,4838,4839,4841,4843,4846,4848],{"class":49,"line":560},[47,4840,4712],{"class":265},[47,4842,308],{"class":272},[47,4844,4845],{"class":335},"beginPath",[47,4847,2070],{"class":884},[47,4849,1246],{"class":272},[47,4851,4852,4854,4856,4859,4861,4863,4865,4867,4869],{"class":49,"line":566},[47,4853,4712],{"class":265},[47,4855,308],{"class":272},[47,4857,4858],{"class":335},"moveTo",[47,4860,339],{"class":884},[47,4862,3458],{"class":1707},[47,4864,1711],{"class":272},[47,4866,4809],{"class":265},[47,4868,374],{"class":884},[47,4870,1246],{"class":272},[47,4872,4873],{"class":49,"line":572},[47,4874,65],{"emptyLinePlaceholder":64},[47,4876,4877,4880,4882,4884,4887,4889,4891,4894,4896,4899,4902,4904,4906,4909,4912,4915],{"class":49,"line":578},[47,4878,4879],{"class":261},"    for",[47,4881,3718],{"class":884},[47,4883,3930],{"class":357},[47,4885,4886],{"class":265}," x",[47,4888,319],{"class":272},[47,4890,3458],{"class":1707},[47,4892,4893],{"class":272},";",[47,4895,4886],{"class":265},[47,4897,4898],{"class":272}," \u003C=",[47,4900,4901],{"class":265}," canvasEndX",[47,4903,4893],{"class":272},[47,4905,4886],{"class":265},[47,4907,4908],{"class":272},"+=",[47,4910,4911],{"class":1707}," 1",[47,4913,4914],{"class":884},") ",[47,4916,342],{"class":272},[47,4918,4919,4922,4925,4927,4930,4932,4935,4938,4940,4943,4946,4948,4950,4953,4955,4957,4959,4961,4963,4965,4968,4971,4974],{"class":49,"line":584},[47,4920,4921],{"class":357},"        var",[47,4923,4924],{"class":265}," y",[47,4926,1654],{"class":272},[47,4928,4929],{"class":272}," -",[47,4931,4795],{"class":265},[47,4933,4934],{"class":272},"*",[47,4936,4937],{"class":265},"Math",[47,4939,308],{"class":272},[47,4941,4942],{"class":335},"sin",[47,4944,4945],{"class":884},"((",[47,4947,4937],{"class":265},[47,4949,308],{"class":272},[47,4951,4952],{"class":265},"PI",[47,4954,3819],{"class":272},[47,4956,4800],{"class":265},[47,4958,374],{"class":884},[47,4960,4934],{"class":272},[47,4962,339],{"class":884},[47,4964,4790],{"class":265},[47,4966,4967],{"class":272},"+",[47,4969,4970],{"class":265},"x",[47,4972,4973],{"class":884},"))",[47,4975,1246],{"class":272},[47,4977,4978,4980,4982,4985,4987,4989,4991,4993,4995,4998,5000],{"class":49,"line":590},[47,4979,4114],{"class":265},[47,4981,308],{"class":272},[47,4983,4984],{"class":335},"lineTo",[47,4986,339],{"class":884},[47,4988,4970],{"class":265},[47,4990,1711],{"class":272},[47,4992,4924],{"class":265},[47,4994,4967],{"class":272},[47,4996,4997],{"class":265},"waveStartY",[47,4999,374],{"class":884},[47,5001,1246],{"class":272},[47,5003,5004],{"class":49,"line":596},[47,5005,587],{"class":272},[47,5007,5008],{"class":49,"line":2324},[47,5009,65],{"emptyLinePlaceholder":64},[47,5011,5012,5014,5016,5018,5020,5022,5024,5026,5028],{"class":49,"line":2329},[47,5013,4712],{"class":265},[47,5015,308],{"class":272},[47,5017,4984],{"class":335},[47,5019,339],{"class":884},[47,5021,4596],{"class":265},[47,5023,1711],{"class":272},[47,5025,4601],{"class":265},[47,5027,374],{"class":884},[47,5029,1246],{"class":272},[47,5031,5032,5034,5036,5038,5040,5042,5044,5046,5048],{"class":49,"line":2340},[47,5033,4712],{"class":265},[47,5035,308],{"class":272},[47,5037,4984],{"class":335},[47,5039,339],{"class":884},[47,5041,3458],{"class":1707},[47,5043,1711],{"class":272},[47,5045,4601],{"class":265},[47,5047,374],{"class":884},[47,5049,1246],{"class":272},[47,5051,5052,5054,5056,5059,5061],{"class":49,"line":2345},[47,5053,4712],{"class":265},[47,5055,308],{"class":272},[47,5057,5058],{"class":335},"closePath",[47,5060,2070],{"class":884},[47,5062,1246],{"class":272},[47,5064,5066],{"class":49,"line":5065},38,[47,5067,65],{"emptyLinePlaceholder":64},[47,5069,5071,5074,5076,5079,5081,5083,5086,5088,5090],{"class":49,"line":5070},39,[47,5072,5073],{"class":265},"    　ctx",[47,5075,308],{"class":272},[47,5077,5078],{"class":265},"fillStyle",[47,5080,1654],{"class":272},[47,5082,2710],{"class":272},[47,5084,5085],{"class":276},"rgba(255,255,255,1)",[47,5087,934],{"class":272},[47,5089,4893],{"class":272},[47,5091,5092],{"class":1047}," \u002F\u002Fopacity 1\n",[47,5094,5096,5098,5100,5103,5105],{"class":49,"line":5095},40,[47,5097,4712],{"class":265},[47,5099,308],{"class":272},[47,5101,5102],{"class":335},"fill",[47,5104,2070],{"class":884},[47,5106,1246],{"class":272},[47,5108,5110],{"class":49,"line":5109},41,[47,5111,599],{"class":272},[13,5113,5114],{},"I make new three functions there.",[133,5116,5117,5120,5123],{},[136,5118,5119],{},"initDraw()：Call below two function.",[136,5121,5122],{},"imageSet()：Render image on canvas. If it is already rendered, clear it.",[136,5124,5125],{},"waveDrawing()：Cut image by wave shape",[13,5127,5128],{},"I explain these.",[149,5130,5132],{"id":5131},"imagesetrender-image-on-canvas","imageSet():Render image on canvas.",[37,5134,5136],{"className":251,"code":5135,"language":254,"meta":42,"style":42},"function imageSet(imageObj,canvasEndX,canvasEndY){\n     var imgWidth = imageObj.width;\n     var imgHeight = imageObj.height;\n     ctx.drawImage(image,0,0,imgWidth,imgHeight,0,0,canvasEndX,canvasEndY);\n}\n",[44,5137,5138,5158,5175,5191,5240],{"__ignoreMap":42},[47,5139,5140,5142,5144,5146,5148,5150,5152,5154,5156],{"class":49,"line":50},[47,5141,3639],{"class":357},[47,5143,4657],{"class":335},[47,5145,339],{"class":272},[47,5147,4662],{"class":353},[47,5149,1711],{"class":272},[47,5151,4596],{"class":353},[47,5153,1711],{"class":272},[47,5155,4601],{"class":353},[47,5157,2123],{"class":272},[47,5159,5160,5163,5165,5167,5169,5171,5173],{"class":49,"line":56},[47,5161,5162],{"class":357},"     var",[47,5164,4679],{"class":265},[47,5166,1654],{"class":272},[47,5168,4684],{"class":265},[47,5170,308],{"class":272},[47,5172,3777],{"class":265},[47,5174,1246],{"class":272},[47,5176,5177,5179,5181,5183,5185,5187,5189],{"class":49,"line":4},[47,5178,5162],{"class":357},[47,5180,4697],{"class":265},[47,5182,1654],{"class":272},[47,5184,4684],{"class":265},[47,5186,308],{"class":272},[47,5188,3804],{"class":265},[47,5190,1246],{"class":272},[47,5192,5193,5196,5198,5200,5202,5204,5206,5208,5210,5212,5214,5216,5218,5220,5222,5224,5226,5228,5230,5232,5234,5236,5238],{"class":49,"line":68},[47,5194,5195],{"class":265},"     ctx",[47,5197,308],{"class":272},[47,5199,3852],{"class":335},[47,5201,339],{"class":884},[47,5203,3857],{"class":265},[47,5205,1711],{"class":272},[47,5207,3458],{"class":1707},[47,5209,1711],{"class":272},[47,5211,3458],{"class":1707},[47,5213,1711],{"class":272},[47,5215,4733],{"class":265},[47,5217,1711],{"class":272},[47,5219,4738],{"class":265},[47,5221,1711],{"class":272},[47,5223,3458],{"class":1707},[47,5225,1711],{"class":272},[47,5227,3458],{"class":1707},[47,5229,1711],{"class":272},[47,5231,4596],{"class":265},[47,5233,1711],{"class":272},[47,5235,4601],{"class":265},[47,5237,374],{"class":884},[47,5239,1246],{"class":272},[47,5241,5242],{"class":49,"line":74},[47,5243,599],{"class":272},[13,5245,5246,5247,5249],{},"This function just render image on canvas. When you set image object, canvas height and width at artguments, function use ",[44,5248,4197],{}," to render image.",[149,5251,5253],{"id":5252},"wavedrawingcut-image-by-wave-shape","waveDrawing():Cut image by wave shape",[13,5255,5256,5259],{},[44,5257,5258],{},"waveDrawing()","has process cutting image by wave shape.",[37,5261,5263],{"className":251,"code":5262,"language":254,"meta":42,"style":42},"function waveDrawing(waveStartPoint,canvasEndX,canvasEndY,deg,am,tp){\n      var waveStartY = waveStartPoint;\n      ctx.globalCompositeOperation = \"destination-out\";\n      ctx.beginPath();\n      ctx.moveTo(0, waveStartY);\n\n      for (var x=0; x \u003C= canvasEndX; x+= 1) {\n           var y = -am*Math.sin((Math.PI\u002Ftp)*(deg+x));;\n           ctx.lineTo(x, y+waveStartY);\n      }\n\n      ctx.lineTo(canvasEndX,canvasEndY);\n      ctx.lineTo(0,canvasEndY);\n      ctx.closePath();\n\n      ctx.fillStyle = \"rgba(255,255,255,1)\"; \u002F\u002Fopacity 1\n      ctx.fill();\n}\n",[44,5264,5265,5297,5310,5329,5341,5361,5365,5400,5450,5475,5479,5483,5503,5523,5535,5539,5559,5571],{"__ignoreMap":42},[47,5266,5267,5269,5271,5273,5275,5277,5279,5281,5283,5285,5287,5289,5291,5293,5295],{"class":49,"line":50},[47,5268,3639],{"class":357},[47,5270,4773],{"class":335},[47,5272,339],{"class":272},[47,5274,4615],{"class":353},[47,5276,1711],{"class":272},[47,5278,4596],{"class":353},[47,5280,1711],{"class":272},[47,5282,4601],{"class":353},[47,5284,1711],{"class":272},[47,5286,4790],{"class":353},[47,5288,1711],{"class":272},[47,5290,4795],{"class":353},[47,5292,1711],{"class":272},[47,5294,4800],{"class":353},[47,5296,2123],{"class":272},[47,5298,5299,5302,5304,5306,5308],{"class":49,"line":56},[47,5300,5301],{"class":357},"      var",[47,5303,4809],{"class":265},[47,5305,1654],{"class":272},[47,5307,4814],{"class":265},[47,5309,1246],{"class":272},[47,5311,5312,5315,5317,5319,5321,5323,5325,5327],{"class":49,"line":4},[47,5313,5314],{"class":265},"      ctx",[47,5316,308],{"class":272},[47,5318,4825],{"class":265},[47,5320,1654],{"class":272},[47,5322,2710],{"class":272},[47,5324,4832],{"class":276},[47,5326,934],{"class":272},[47,5328,1246],{"class":272},[47,5330,5331,5333,5335,5337,5339],{"class":49,"line":68},[47,5332,5314],{"class":265},[47,5334,308],{"class":272},[47,5336,4845],{"class":335},[47,5338,2070],{"class":884},[47,5340,1246],{"class":272},[47,5342,5343,5345,5347,5349,5351,5353,5355,5357,5359],{"class":49,"line":74},[47,5344,5314],{"class":265},[47,5346,308],{"class":272},[47,5348,4858],{"class":335},[47,5350,339],{"class":884},[47,5352,3458],{"class":1707},[47,5354,1711],{"class":272},[47,5356,4809],{"class":265},[47,5358,374],{"class":884},[47,5360,1246],{"class":272},[47,5362,5363],{"class":49,"line":80},[47,5364,65],{"emptyLinePlaceholder":64},[47,5366,5367,5370,5372,5374,5376,5378,5380,5382,5384,5386,5388,5390,5392,5394,5396,5398],{"class":49,"line":85},[47,5368,5369],{"class":261},"      for",[47,5371,3718],{"class":884},[47,5373,3930],{"class":357},[47,5375,4886],{"class":265},[47,5377,319],{"class":272},[47,5379,3458],{"class":1707},[47,5381,4893],{"class":272},[47,5383,4886],{"class":265},[47,5385,4898],{"class":272},[47,5387,4901],{"class":265},[47,5389,4893],{"class":272},[47,5391,4886],{"class":265},[47,5393,4908],{"class":272},[47,5395,4911],{"class":1707},[47,5397,4914],{"class":884},[47,5399,342],{"class":272},[47,5401,5402,5405,5407,5409,5411,5413,5415,5417,5419,5421,5423,5425,5427,5429,5431,5433,5435,5437,5439,5441,5443,5445,5447],{"class":49,"line":91},[47,5403,5404],{"class":357},"           var",[47,5406,4924],{"class":265},[47,5408,1654],{"class":272},[47,5410,4929],{"class":272},[47,5412,4795],{"class":265},[47,5414,4934],{"class":272},[47,5416,4937],{"class":265},[47,5418,308],{"class":272},[47,5420,4942],{"class":335},[47,5422,4945],{"class":884},[47,5424,4937],{"class":265},[47,5426,308],{"class":272},[47,5428,4952],{"class":265},[47,5430,3819],{"class":272},[47,5432,4800],{"class":265},[47,5434,374],{"class":884},[47,5436,4934],{"class":272},[47,5438,339],{"class":884},[47,5440,4790],{"class":265},[47,5442,4967],{"class":272},[47,5444,4970],{"class":265},[47,5446,4973],{"class":884},[47,5448,5449],{"class":272},";;\n",[47,5451,5452,5455,5457,5459,5461,5463,5465,5467,5469,5471,5473],{"class":49,"line":97},[47,5453,5454],{"class":265},"           ctx",[47,5456,308],{"class":272},[47,5458,4984],{"class":335},[47,5460,339],{"class":884},[47,5462,4970],{"class":265},[47,5464,1711],{"class":272},[47,5466,4924],{"class":265},[47,5468,4967],{"class":272},[47,5470,4997],{"class":265},[47,5472,374],{"class":884},[47,5474,1246],{"class":272},[47,5476,5477],{"class":49,"line":102},[47,5478,2099],{"class":272},[47,5480,5481],{"class":49,"line":108},[47,5482,65],{"emptyLinePlaceholder":64},[47,5484,5485,5487,5489,5491,5493,5495,5497,5499,5501],{"class":49,"line":114},[47,5486,5314],{"class":265},[47,5488,308],{"class":272},[47,5490,4984],{"class":335},[47,5492,339],{"class":884},[47,5494,4596],{"class":265},[47,5496,1711],{"class":272},[47,5498,4601],{"class":265},[47,5500,374],{"class":884},[47,5502,1246],{"class":272},[47,5504,5505,5507,5509,5511,5513,5515,5517,5519,5521],{"class":49,"line":481},[47,5506,5314],{"class":265},[47,5508,308],{"class":272},[47,5510,4984],{"class":335},[47,5512,339],{"class":884},[47,5514,3458],{"class":1707},[47,5516,1711],{"class":272},[47,5518,4601],{"class":265},[47,5520,374],{"class":884},[47,5522,1246],{"class":272},[47,5524,5525,5527,5529,5531,5533],{"class":49,"line":487},[47,5526,5314],{"class":265},[47,5528,308],{"class":272},[47,5530,5058],{"class":335},[47,5532,2070],{"class":884},[47,5534,1246],{"class":272},[47,5536,5537],{"class":49,"line":493},[47,5538,65],{"emptyLinePlaceholder":64},[47,5540,5541,5543,5545,5547,5549,5551,5553,5555,5557],{"class":49,"line":499},[47,5542,5314],{"class":265},[47,5544,308],{"class":272},[47,5546,5078],{"class":265},[47,5548,1654],{"class":272},[47,5550,2710],{"class":272},[47,5552,5085],{"class":276},[47,5554,934],{"class":272},[47,5556,4893],{"class":272},[47,5558,5092],{"class":1047},[47,5560,5561,5563,5565,5567,5569],{"class":49,"line":505},[47,5562,5314],{"class":265},[47,5564,308],{"class":272},[47,5566,5102],{"class":335},[47,5568,2070],{"class":884},[47,5570,1246],{"class":272},[47,5572,5573],{"class":49,"line":511},[47,5574,599],{"class":272},[13,5576,5577],{},"Each parameters mean",[133,5579,5580,5583,5586,5589,5592,5595],{},[136,5581,5582],{},"waveStartPoint：Start Y coordinate to write the wave.",[136,5584,5585],{},"canvasEndX：X coordinate of the canvas's right edge.（max canvas's X coordinate）",[136,5587,5588],{},"canvasEndY：Y coordinate of the canvas's bottom edge.（max canvas's Y coordinate）",[136,5590,5591],{},"deg：Init degree.",[136,5593,5594],{},"am：amplitude（This changes the wave's maxed height）",[136,5596,5597],{},"tp：period（This changes a wave's maxed width）",[13,5599,5600,5601,5603,5604,5606],{},"You don't have to think hard. More incresing ",[44,5602,4795],{}," higher wave. More increasing ",[44,5605,4800],{},",  gentle wave.",[13,5608,5609],{},"And ctx is the canvas instance you define above. It is global vars at this time.",[214,5611,5613],{"id":5612},"define-the-position-to-draw-and-configure-superposition","Define the position to draw and Configure superposition",[37,5615,5617],{"className":251,"code":5616,"language":254,"meta":42,"style":42},"var waveStartY = waveStartPoint;\nctx.globalCompositeOperation = \"destination-out\";\nctx.beginPath();\nctx.moveTo(0, waveStartY);\n",[44,5618,5619,5632,5651,5663],{"__ignoreMap":42},[47,5620,5621,5623,5626,5628,5630],{"class":49,"line":50},[47,5622,3930],{"class":357},[47,5624,5625],{"class":265}," waveStartY ",[47,5627,319],{"class":272},[47,5629,4814],{"class":265},[47,5631,1246],{"class":272},[47,5633,5634,5636,5638,5641,5643,5645,5647,5649],{"class":49,"line":56},[47,5635,4330],{"class":265},[47,5637,308],{"class":272},[47,5639,5640],{"class":265},"globalCompositeOperation ",[47,5642,319],{"class":272},[47,5644,2710],{"class":272},[47,5646,4832],{"class":276},[47,5648,934],{"class":272},[47,5650,1246],{"class":272},[47,5652,5653,5655,5657,5659,5661],{"class":49,"line":4},[47,5654,4330],{"class":265},[47,5656,308],{"class":272},[47,5658,4845],{"class":335},[47,5660,2070],{"class":265},[47,5662,1246],{"class":272},[47,5664,5665,5667,5669,5671,5673,5675,5677,5680],{"class":49,"line":68},[47,5666,4330],{"class":265},[47,5668,308],{"class":272},[47,5670,4858],{"class":335},[47,5672,339],{"class":265},[47,5674,3458],{"class":1707},[47,5676,1711],{"class":272},[47,5678,5679],{"class":265}," waveStartY)",[47,5681,1246],{"class":272},[13,5683,5684,5687,5688],{},[44,5685,5686],{},"ctx.globalCompositeOperation = \"destination-out\"; "," is very important to make the image transparent. ",[814,5689,5692],{"href":5690,"rel":5691},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FAPI\u002FCanvasRenderingContext2D\u002FglobalCompositeOperation",[818],"MDN",[13,5694,5695,5697],{},[44,5696,4825],{}," configure how the browser renders superposed shapes on the canvas. Remenber the below image.",[122,5699],{":src":3319,":width":125},[13,5701,5702,5703,405,5706,5709],{},"This process fills the image by transparent within the area surrounded by a red line. When that, ",[17,5704,5705],{},"the already rendered image",[17,5707,5708],{},"the wave shape filled transparent"," are superposed.",[13,5711,5712],{},"The configure renderers only parts whitch the image and the shape are not superposed. So particular area will be transparent like no.5 of the above figure",[214,5714,5716],{"id":5715},"specify-cut-area","Specify cut area",[37,5718,5720],{"className":251,"code":5719,"language":254,"meta":42,"style":42}," ctx.beginPath();\n ctx.moveTo(0, waveStartY);\n for (var x=0; x \u003C= canvasEndX; x+= 1) {\n     var y = -am*Math.sin((Math.PI\u002Ftp)*(deg+x));;\n     ctx.lineTo(x, y+waveStartY);\n }\n\n ctx.lineTo(canvasEndX,canvasEndY);\n ctx.lineTo(0,canvasEndY);\n ctx.closePath();\n",[44,5721,5722,5734,5752,5789,5837,5861,5866,5870,5888,5906],{"__ignoreMap":42},[47,5723,5724,5726,5728,5730,5732],{"class":49,"line":50},[47,5725,3680],{"class":265},[47,5727,308],{"class":272},[47,5729,4845],{"class":335},[47,5731,2070],{"class":265},[47,5733,1246],{"class":272},[47,5735,5736,5738,5740,5742,5744,5746,5748,5750],{"class":49,"line":56},[47,5737,3680],{"class":265},[47,5739,308],{"class":272},[47,5741,4858],{"class":335},[47,5743,339],{"class":265},[47,5745,3458],{"class":1707},[47,5747,1711],{"class":272},[47,5749,5679],{"class":265},[47,5751,1246],{"class":272},[47,5753,5754,5757,5759,5761,5763,5765,5767,5769,5772,5775,5777,5779,5781,5783,5785,5787],{"class":49,"line":4},[47,5755,5756],{"class":261}," for",[47,5758,3718],{"class":265},[47,5760,3930],{"class":357},[47,5762,4886],{"class":265},[47,5764,319],{"class":272},[47,5766,3458],{"class":1707},[47,5768,4893],{"class":272},[47,5770,5771],{"class":265}," x ",[47,5773,5774],{"class":272},"\u003C=",[47,5776,4901],{"class":265},[47,5778,4893],{"class":272},[47,5780,4886],{"class":265},[47,5782,4908],{"class":272},[47,5784,4911],{"class":1707},[47,5786,4914],{"class":265},[47,5788,342],{"class":272},[47,5790,5791,5793,5795,5797,5799,5801,5803,5805,5807,5809,5811,5813,5815,5817,5819,5821,5823,5825,5827,5829,5831,5833,5835],{"class":49,"line":68},[47,5792,5162],{"class":357},[47,5794,4924],{"class":265},[47,5796,1654],{"class":272},[47,5798,4929],{"class":272},[47,5800,4795],{"class":265},[47,5802,4934],{"class":272},[47,5804,4937],{"class":265},[47,5806,308],{"class":272},[47,5808,4942],{"class":335},[47,5810,4945],{"class":884},[47,5812,4937],{"class":265},[47,5814,308],{"class":272},[47,5816,4952],{"class":265},[47,5818,3819],{"class":272},[47,5820,4800],{"class":265},[47,5822,374],{"class":884},[47,5824,4934],{"class":272},[47,5826,339],{"class":884},[47,5828,4790],{"class":265},[47,5830,4967],{"class":272},[47,5832,4970],{"class":265},[47,5834,4973],{"class":884},[47,5836,5449],{"class":272},[47,5838,5839,5841,5843,5845,5847,5849,5851,5853,5855,5857,5859],{"class":49,"line":74},[47,5840,5195],{"class":265},[47,5842,308],{"class":272},[47,5844,4984],{"class":335},[47,5846,339],{"class":884},[47,5848,4970],{"class":265},[47,5850,1711],{"class":272},[47,5852,4924],{"class":265},[47,5854,4967],{"class":272},[47,5856,4997],{"class":265},[47,5858,374],{"class":884},[47,5860,1246],{"class":272},[47,5862,5863],{"class":49,"line":80},[47,5864,5865],{"class":272}," }\n",[47,5867,5868],{"class":49,"line":85},[47,5869,65],{"emptyLinePlaceholder":64},[47,5871,5872,5874,5876,5878,5881,5883,5886],{"class":49,"line":91},[47,5873,3680],{"class":265},[47,5875,308],{"class":272},[47,5877,4984],{"class":335},[47,5879,5880],{"class":265},"(canvasEndX",[47,5882,1711],{"class":272},[47,5884,5885],{"class":265},"canvasEndY)",[47,5887,1246],{"class":272},[47,5889,5890,5892,5894,5896,5898,5900,5902,5904],{"class":49,"line":97},[47,5891,3680],{"class":265},[47,5893,308],{"class":272},[47,5895,4984],{"class":335},[47,5897,339],{"class":265},[47,5899,3458],{"class":1707},[47,5901,1711],{"class":272},[47,5903,5885],{"class":265},[47,5905,1246],{"class":272},[47,5907,5908,5910,5912,5914,5916],{"class":49,"line":102},[47,5909,3680],{"class":265},[47,5911,308],{"class":272},[47,5913,5058],{"class":335},[47,5915,2070],{"class":265},[47,5917,1246],{"class":272},[13,5919,5920],{},"Next, I specify the cut range. That is 1~4 of the above figure. In this section, the word 'path' is often used. If you use Illustrator or Photoshop, you know it. Javascript also uses 'path' and specify the cut range.",[13,5922,5923,5924,5927],{},"Just in the case for who do not know 'path', I explain it. The path is the point that defines the shape. Drawing lines from point to point makes the shape. For example, the square has 4 points(edge) and, writing in one stroke from point to point makes the square. You define the ",[5925,5926,3095],"em",{}," of writing in one stroke and position on the code.",[2821,5929,5930,5936,5942,5948],{},[136,5931,5932,5935],{},[44,5933,5934],{},"ctx.beginPath()"," starts setting paths.",[136,5937,5938,5941],{},[44,5939,5940],{},"ctx.moveTo(X,Y)"," moves the path to specify coordinates.",[136,5943,5944,5947],{},[44,5945,5946],{},"ctx.lineTo(nextX,nextY)"," draw a line and move next coordinates.",[136,5949,5950,5953],{},[44,5951,5952],{},"ctx.closePath()"," declear to end setting path.",[13,5955,5956],{},"In this article case,",[2821,5958,5959,5968,5975,5978],{},[136,5960,5961,5962,5964,5965,5967],{},"Start setting paths from （0, waveStartY）. ",[44,5963,3458],{}," is the left edge of the image (X = 0) and ",[44,5966,4997],{}," is a start point for the wave.",[136,5969,5970,5971,5974],{},"Using ",[44,5972,5973],{},"for"," and write the trigonometric function has x coordinates as sin argument, set paths and the paths.",[136,5976,5977],{},"When the path arrives at the right edge of the image, back to the start point via the edge of the right bottom and left bottom.",[136,5979,5980],{},"Close paths.",[214,5982,5984],{"id":5983},"fill-the-selected-area-in-transparent","Fill the selected area in transparent",[13,5986,5987],{},"You just fill after you select the area by above method.",[37,5989,5991],{"className":251,"code":5990,"language":254,"meta":42,"style":42},"ctx.fillStyle = \"rgba(255,255,255,1)\"; \u002F\u002Fopacity 1\nctx.fill();\n",[44,5992,5993,6014],{"__ignoreMap":42},[47,5994,5995,5997,5999,6002,6004,6006,6008,6010,6012],{"class":49,"line":50},[47,5996,4330],{"class":265},[47,5998,308],{"class":272},[47,6000,6001],{"class":265},"fillStyle ",[47,6003,319],{"class":272},[47,6005,2710],{"class":272},[47,6007,5085],{"class":276},[47,6009,934],{"class":272},[47,6011,4893],{"class":272},[47,6013,5092],{"class":1047},[47,6015,6016,6018,6020,6022,6024],{"class":49,"line":56},[47,6017,4330],{"class":265},[47,6019,308],{"class":272},[47,6021,5102],{"class":335},[47,6023,2070],{"class":265},[47,6025,1246],{"class":272},[13,6027,6028,6030,6031,6034,6035,6038],{},[44,6029,5078],{}," configures the color to fill.  If you set ",[44,6032,6033],{},"globalCompositeOperation = \"destination-out\";`, there no problem to use any colors. ","fill()",[44,6036,6037],{},"method fills the area surrounded paths. Because","globalCompositeOperation = \"destination-out\";`` is configured, the parts which the image and the shape are not superposed remains, but superposed area will be transparent.",[13,6040,6041],{},"If you come here, you get the image that is cut with the wave.",[122,6043],{":src":3269,":width":125},[29,6045,6047],{"id":6046},"implement-animation-by-the-loop","Implement animation by the loop.",[13,6049,6050,6051,405,6054,6056],{},"Using defined functions ",[44,6052,6053],{},"imageSet()",[44,6055,5258],{},", set a loop fucntion.",[37,6058,6060],{"className":251,"code":6059,"language":254,"meta":42,"style":42},"function loop(){\n      setInterval(function(){\n      imageSet(image,canvasEndX,canvasEndY);\n      waveDrawing(waveStartPoint,canvasEndX,canvasEndY,degree,amplitude,period);\n      degree += 12; \u002F\u002F 12 is feeling.\n    },30)\n}\n",[44,6061,6062,6071,6082,6103,6136,6152,6162],{"__ignoreMap":42},[47,6063,6064,6066,6069],{"class":49,"line":50},[47,6065,3639],{"class":357},[47,6067,6068],{"class":335}," loop",[47,6070,1612],{"class":272},[47,6072,6073,6076,6078,6080],{"class":49,"line":56},[47,6074,6075],{"class":335},"      setInterval",[47,6077,339],{"class":884},[47,6079,3639],{"class":357},[47,6081,1612],{"class":272},[47,6083,6084,6087,6089,6091,6093,6095,6097,6099,6101],{"class":49,"line":4},[47,6085,6086],{"class":335},"      imageSet",[47,6088,339],{"class":884},[47,6090,3857],{"class":265},[47,6092,1711],{"class":272},[47,6094,4596],{"class":265},[47,6096,1711],{"class":272},[47,6098,4601],{"class":265},[47,6100,374],{"class":884},[47,6102,1246],{"class":272},[47,6104,6105,6108,6110,6112,6114,6116,6118,6120,6122,6124,6126,6128,6130,6132,6134],{"class":49,"line":68},[47,6106,6107],{"class":335},"      waveDrawing",[47,6109,339],{"class":884},[47,6111,4615],{"class":265},[47,6113,1711],{"class":272},[47,6115,4596],{"class":265},[47,6117,1711],{"class":272},[47,6119,4601],{"class":265},[47,6121,1711],{"class":272},[47,6123,4628],{"class":265},[47,6125,1711],{"class":272},[47,6127,4633],{"class":265},[47,6129,1711],{"class":272},[47,6131,4638],{"class":265},[47,6133,374],{"class":884},[47,6135,1246],{"class":272},[47,6137,6138,6141,6144,6147,6149],{"class":49,"line":74},[47,6139,6140],{"class":265},"      degree",[47,6142,6143],{"class":272}," +=",[47,6145,6146],{"class":1707}," 12",[47,6148,4893],{"class":272},[47,6150,6151],{"class":1047}," \u002F\u002F 12 is feeling.\n",[47,6153,6154,6157,6160],{"class":49,"line":80},[47,6155,6156],{"class":272},"    },",[47,6158,6159],{"class":1707},"30",[47,6161,392],{"class":884},[47,6163,6164],{"class":49,"line":85},[47,6165,599],{"class":272},[13,6167,6168,6169,6171,6172,6175],{},"The most important point is adding the number of angle with ",[44,6170,5258],{}," like ",[44,6173,6174],{},"degree +=4",".　Thus, the wave is animated. More increase degrees, more fast the wave. If you set over 50, it will be rough waves.",[13,6177,6178,6179,6181,6182,4433],{},"And ",[44,6180,4193],{}," fires the  ",[44,6183,6184],{},"loop()",[37,6186,6188],{"className":251,"code":6187,"language":254,"meta":42,"style":42},"image.onload = function(){\n    initDraw();\n    loop();\n}\n",[44,6189,6190,6204,6212,6221],{"__ignoreMap":42},[47,6191,6192,6194,6196,6198,6200,6202],{"class":49,"line":50},[47,6193,3857],{"class":265},[47,6195,308],{"class":272},[47,6197,3835],{"class":335},[47,6199,1654],{"class":272},[47,6201,3840],{"class":357},[47,6203,1612],{"class":272},[47,6205,6206,6208,6210],{"class":49,"line":56},[47,6207,4457],{"class":335},[47,6209,2070],{"class":884},[47,6211,1246],{"class":272},[47,6213,6214,6217,6219],{"class":49,"line":4},[47,6215,6216],{"class":335},"    loop",[47,6218,2070],{"class":884},[47,6220,1246],{"class":272},[47,6222,6223],{"class":49,"line":68},[47,6224,599],{"class":272},[29,6226,6228],{"id":6227},"whole-code","Whole code",[13,6230,6231],{},"Whole code is theb below.",[37,6233,6235],{"className":251,"code":6234,"language":254,"meta":42,"style":42},"window.onload = init();\nfunction init(){\n    initAnimation();\n\n    function initAnimation(){\n        var canvas = document.getElementById('canvas');\n        var ctx = canvas.getContext('2d');\n\n        var imagePath = ('.\u002Fsample.jpg');\n        var image = new Image();\n        image.src = imagePath;\n\n        \u002F\u002Fset canvas width and height\n        canvas.width = Number(window.innerWidth);\n        canvas.height = Number(canvas.width\u002F2);\n        image.onload = function(){\n                initDraw();\n                loop();\n            }\n            \n        var canvasEndX = canvas.width;\n        var canvasEndY = canvas.height;\n        var waveStartPoint = canvasEndY-150;\n\n        var amplitude = 30;\n        var period = 600;\n        var degree = 0;\n\n        function initDraw(){\n            imageSet(image,canvasEndX,canvasEndY);\n            waveDrawing(waveStartPoint,canvasEndX,canvasEndY,degree,amplitude,period);\n        }\n\n        function loop(){\n            setInterval(function(){\n                imageSet(image,canvasEndX,canvasEndY);\n                waveDrawing(waveStartPoint,canvasEndX,canvasEndY,degree,amplitude,period);\n                degree += 12;\n            },30)\n        }\n\n        function imageSet(imageObj,canvasEndX,canvasEndY){\n            var imgWidth = imageObj.width;\n            var imgHeight = imageObj.height;\n\n            ctx.globalCompositeOperation = \"destination-over\";\n            ctx.drawImage(image,0,0,imgWidth,imgHeight,0,0,canvasEndX,canvasEndY);\n        }\n\n        function waveDrawing(waveStartPoint,canvasEndX,canvasEndY,deg,am,tp){\n            var waveStartY = waveStartPoint;\n            ctx.globalCompositeOperation = \"destination-out\";\n            ctx.beginPath();\n            ctx.moveTo(0, waveStartY);\n\n            for (var x=0; x \u003C= canvasEndX; x+= 1) {\n                var y = -am*Math.sin((Math.PI\u002Ftp)*(deg+x));\n                ctx.lineTo(x, y+waveStartY);\n            }\n\n            ctx.lineTo(canvasEndX,canvasEndY);\n            ctx.lineTo(0,canvasEndY);\n            ctx.closePath();\n\n            ctx.fillStyle = \"rgba(255,255,255,1)\"; \u002F\u002Fopacity 1\n            ctx.fill();\n        }\n\n    }\n}\n",[44,6236,6237,6255,6263,6272,6276,6285,6311,6337,6341,6361,6377,6392,6396,6401,6426,6454,6468,6477,6486,6490,6495,6511,6527,6543,6547,6560,6574,6587,6591,6600,6621,6654,6659,6663,6671,6682,6703,6736,6747,6756,6760,6764,6785,6803,6820,6825,6846,6895,6900,6905,6938,6951,6970,6983,7004,7009,7045,7095,7121,7126,7131,7152,7173,7186,7191,7212,7225,7230,7235,7240],{"__ignoreMap":42},[47,6238,6239,6241,6243,6246,6248,6251,6253],{"class":49,"line":50},[47,6240,1274],{"class":265},[47,6242,308],{"class":272},[47,6244,6245],{"class":265},"onload ",[47,6247,319],{"class":272},[47,6249,6250],{"class":335}," init",[47,6252,2070],{"class":265},[47,6254,1246],{"class":272},[47,6256,6257,6259,6261],{"class":49,"line":56},[47,6258,3639],{"class":357},[47,6260,6250],{"class":335},[47,6262,1612],{"class":272},[47,6264,6265,6268,6270],{"class":49,"line":4},[47,6266,6267],{"class":335},"    initAnimation",[47,6269,2070],{"class":884},[47,6271,1246],{"class":272},[47,6273,6274],{"class":49,"line":68},[47,6275,65],{"emptyLinePlaceholder":64},[47,6277,6278,6281,6283],{"class":49,"line":74},[47,6279,6280],{"class":357},"    function",[47,6282,3642],{"class":335},[47,6284,1612],{"class":272},[47,6286,6287,6289,6291,6293,6295,6297,6299,6301,6303,6305,6307,6309],{"class":49,"line":80},[47,6288,4921],{"class":357},[47,6290,3652],{"class":265},[47,6292,1654],{"class":272},[47,6294,3657],{"class":265},[47,6296,308],{"class":272},[47,6298,1297],{"class":335},[47,6300,339],{"class":884},[47,6302,384],{"class":272},[47,6304,3556],{"class":276},[47,6306,384],{"class":272},[47,6308,374],{"class":884},[47,6310,1246],{"class":272},[47,6312,6313,6315,6317,6319,6321,6323,6325,6327,6329,6331,6333,6335],{"class":49,"line":85},[47,6314,4921],{"class":357},[47,6316,3680],{"class":265},[47,6318,1654],{"class":272},[47,6320,3652],{"class":265},[47,6322,308],{"class":272},[47,6324,3689],{"class":335},[47,6326,339],{"class":884},[47,6328,384],{"class":272},[47,6330,3696],{"class":276},[47,6332,384],{"class":272},[47,6334,374],{"class":884},[47,6336,1246],{"class":272},[47,6338,6339],{"class":49,"line":91},[47,6340,65],{"emptyLinePlaceholder":64},[47,6342,6343,6345,6347,6349,6351,6353,6355,6357,6359],{"class":49,"line":97},[47,6344,4921],{"class":357},[47,6346,3713],{"class":265},[47,6348,1654],{"class":272},[47,6350,3718],{"class":884},[47,6352,384],{"class":272},[47,6354,3723],{"class":276},[47,6356,384],{"class":272},[47,6358,374],{"class":884},[47,6360,1246],{"class":272},[47,6362,6363,6365,6367,6369,6371,6373,6375],{"class":49,"line":102},[47,6364,4921],{"class":357},[47,6366,3736],{"class":265},[47,6368,1654],{"class":272},[47,6370,1657],{"class":272},[47,6372,3743],{"class":335},[47,6374,2070],{"class":884},[47,6376,1246],{"class":272},[47,6378,6379,6382,6384,6386,6388,6390],{"class":49,"line":108},[47,6380,6381],{"class":265},"        image",[47,6383,308],{"class":272},[47,6385,3757],{"class":265},[47,6387,1654],{"class":272},[47,6389,3713],{"class":265},[47,6391,1246],{"class":272},[47,6393,6394],{"class":49,"line":114},[47,6395,65],{"emptyLinePlaceholder":64},[47,6397,6398],{"class":49,"line":481},[47,6399,6400],{"class":1047},"        \u002F\u002Fset canvas width and height\n",[47,6402,6403,6406,6408,6410,6412,6414,6416,6418,6420,6422,6424],{"class":49,"line":487},[47,6404,6405],{"class":265},"        canvas",[47,6407,308],{"class":272},[47,6409,3777],{"class":265},[47,6411,1654],{"class":272},[47,6413,3782],{"class":335},[47,6415,339],{"class":884},[47,6417,1274],{"class":265},[47,6419,308],{"class":272},[47,6421,3791],{"class":265},[47,6423,374],{"class":884},[47,6425,1246],{"class":272},[47,6427,6428,6430,6432,6434,6436,6438,6440,6442,6444,6446,6448,6450,6452],{"class":49,"line":493},[47,6429,6405],{"class":265},[47,6431,308],{"class":272},[47,6433,3804],{"class":265},[47,6435,1654],{"class":272},[47,6437,3782],{"class":335},[47,6439,339],{"class":884},[47,6441,3556],{"class":265},[47,6443,308],{"class":272},[47,6445,3777],{"class":265},[47,6447,3819],{"class":272},[47,6449,3822],{"class":1707},[47,6451,374],{"class":884},[47,6453,1246],{"class":272},[47,6455,6456,6458,6460,6462,6464,6466],{"class":49,"line":499},[47,6457,6381],{"class":265},[47,6459,308],{"class":272},[47,6461,3835],{"class":335},[47,6463,1654],{"class":272},[47,6465,3840],{"class":357},[47,6467,1612],{"class":272},[47,6469,6470,6473,6475],{"class":49,"line":505},[47,6471,6472],{"class":335},"                initDraw",[47,6474,2070],{"class":884},[47,6476,1246],{"class":272},[47,6478,6479,6482,6484],{"class":49,"line":511},[47,6480,6481],{"class":335},"                loop",[47,6483,2070],{"class":884},[47,6485,1246],{"class":272},[47,6487,6488],{"class":49,"line":517},[47,6489,3476],{"class":272},[47,6491,6492],{"class":49,"line":523},[47,6493,6494],{"class":884},"            \n",[47,6496,6497,6499,6501,6503,6505,6507,6509],{"class":49,"line":529},[47,6498,4921],{"class":357},[47,6500,4901],{"class":265},[47,6502,1654],{"class":272},[47,6504,3652],{"class":265},[47,6506,308],{"class":272},[47,6508,3777],{"class":265},[47,6510,1246],{"class":272},[47,6512,6513,6515,6517,6519,6521,6523,6525],{"class":49,"line":534},[47,6514,4921],{"class":357},[47,6516,4515],{"class":265},[47,6518,1654],{"class":272},[47,6520,3652],{"class":265},[47,6522,308],{"class":272},[47,6524,3804],{"class":265},[47,6526,1246],{"class":272},[47,6528,6529,6531,6533,6535,6537,6539,6541],{"class":49,"line":540},[47,6530,4921],{"class":357},[47,6532,4814],{"class":265},[47,6534,1654],{"class":272},[47,6536,4515],{"class":265},[47,6538,4518],{"class":272},[47,6540,4521],{"class":1707},[47,6542,1246],{"class":272},[47,6544,6545],{"class":49,"line":545},[47,6546,65],{"emptyLinePlaceholder":64},[47,6548,6549,6551,6554,6556,6558],{"class":49,"line":550},[47,6550,4921],{"class":357},[47,6552,6553],{"class":265}," amplitude",[47,6555,1654],{"class":272},[47,6557,4539],{"class":1707},[47,6559,1246],{"class":272},[47,6561,6562,6564,6567,6569,6572],{"class":49,"line":555},[47,6563,4921],{"class":357},[47,6565,6566],{"class":265}," period",[47,6568,1654],{"class":272},[47,6570,6571],{"class":1707}," 600",[47,6573,1246],{"class":272},[47,6575,6576,6578,6581,6583,6585],{"class":49,"line":560},[47,6577,4921],{"class":357},[47,6579,6580],{"class":265}," degree",[47,6582,1654],{"class":272},[47,6584,4567],{"class":1707},[47,6586,1246],{"class":272},[47,6588,6589],{"class":49,"line":566},[47,6590,65],{"emptyLinePlaceholder":64},[47,6592,6593,6596,6598],{"class":49,"line":572},[47,6594,6595],{"class":357},"        function",[47,6597,4580],{"class":335},[47,6599,1612],{"class":272},[47,6601,6602,6605,6607,6609,6611,6613,6615,6617,6619],{"class":49,"line":578},[47,6603,6604],{"class":335},"            imageSet",[47,6606,339],{"class":884},[47,6608,3857],{"class":265},[47,6610,1711],{"class":272},[47,6612,4596],{"class":265},[47,6614,1711],{"class":272},[47,6616,4601],{"class":265},[47,6618,374],{"class":884},[47,6620,1246],{"class":272},[47,6622,6623,6626,6628,6630,6632,6634,6636,6638,6640,6642,6644,6646,6648,6650,6652],{"class":49,"line":584},[47,6624,6625],{"class":335},"            waveDrawing",[47,6627,339],{"class":884},[47,6629,4615],{"class":265},[47,6631,1711],{"class":272},[47,6633,4596],{"class":265},[47,6635,1711],{"class":272},[47,6637,4601],{"class":265},[47,6639,1711],{"class":272},[47,6641,4628],{"class":265},[47,6643,1711],{"class":272},[47,6645,4633],{"class":265},[47,6647,1711],{"class":272},[47,6649,4638],{"class":265},[47,6651,374],{"class":884},[47,6653,1246],{"class":272},[47,6655,6656],{"class":49,"line":590},[47,6657,6658],{"class":272},"        }\n",[47,6660,6661],{"class":49,"line":596},[47,6662,65],{"emptyLinePlaceholder":64},[47,6664,6665,6667,6669],{"class":49,"line":2324},[47,6666,6595],{"class":357},[47,6668,6068],{"class":335},[47,6670,1612],{"class":272},[47,6672,6673,6676,6678,6680],{"class":49,"line":2329},[47,6674,6675],{"class":335},"            setInterval",[47,6677,339],{"class":884},[47,6679,3639],{"class":357},[47,6681,1612],{"class":272},[47,6683,6684,6687,6689,6691,6693,6695,6697,6699,6701],{"class":49,"line":2340},[47,6685,6686],{"class":335},"                imageSet",[47,6688,339],{"class":884},[47,6690,3857],{"class":265},[47,6692,1711],{"class":272},[47,6694,4596],{"class":265},[47,6696,1711],{"class":272},[47,6698,4601],{"class":265},[47,6700,374],{"class":884},[47,6702,1246],{"class":272},[47,6704,6705,6708,6710,6712,6714,6716,6718,6720,6722,6724,6726,6728,6730,6732,6734],{"class":49,"line":2345},[47,6706,6707],{"class":335},"                waveDrawing",[47,6709,339],{"class":884},[47,6711,4615],{"class":265},[47,6713,1711],{"class":272},[47,6715,4596],{"class":265},[47,6717,1711],{"class":272},[47,6719,4601],{"class":265},[47,6721,1711],{"class":272},[47,6723,4628],{"class":265},[47,6725,1711],{"class":272},[47,6727,4633],{"class":265},[47,6729,1711],{"class":272},[47,6731,4638],{"class":265},[47,6733,374],{"class":884},[47,6735,1246],{"class":272},[47,6737,6738,6741,6743,6745],{"class":49,"line":5065},[47,6739,6740],{"class":265},"                degree",[47,6742,6143],{"class":272},[47,6744,6146],{"class":1707},[47,6746,1246],{"class":272},[47,6748,6749,6752,6754],{"class":49,"line":5070},[47,6750,6751],{"class":272},"            },",[47,6753,6159],{"class":1707},[47,6755,392],{"class":884},[47,6757,6758],{"class":49,"line":5095},[47,6759,6658],{"class":272},[47,6761,6762],{"class":49,"line":5109},[47,6763,65],{"emptyLinePlaceholder":64},[47,6765,6767,6769,6771,6773,6775,6777,6779,6781,6783],{"class":49,"line":6766},42,[47,6768,6595],{"class":357},[47,6770,4657],{"class":335},[47,6772,339],{"class":272},[47,6774,4662],{"class":353},[47,6776,1711],{"class":272},[47,6778,4596],{"class":353},[47,6780,1711],{"class":272},[47,6782,4601],{"class":353},[47,6784,2123],{"class":272},[47,6786,6788,6791,6793,6795,6797,6799,6801],{"class":49,"line":6787},43,[47,6789,6790],{"class":357},"            var",[47,6792,4679],{"class":265},[47,6794,1654],{"class":272},[47,6796,4684],{"class":265},[47,6798,308],{"class":272},[47,6800,3777],{"class":265},[47,6802,1246],{"class":272},[47,6804,6806,6808,6810,6812,6814,6816,6818],{"class":49,"line":6805},44,[47,6807,6790],{"class":357},[47,6809,4697],{"class":265},[47,6811,1654],{"class":272},[47,6813,4684],{"class":265},[47,6815,308],{"class":272},[47,6817,3804],{"class":265},[47,6819,1246],{"class":272},[47,6821,6823],{"class":49,"line":6822},45,[47,6824,65],{"emptyLinePlaceholder":64},[47,6826,6828,6831,6833,6835,6837,6839,6842,6844],{"class":49,"line":6827},46,[47,6829,6830],{"class":265},"            ctx",[47,6832,308],{"class":272},[47,6834,4825],{"class":265},[47,6836,1654],{"class":272},[47,6838,2710],{"class":272},[47,6840,6841],{"class":276},"destination-over",[47,6843,934],{"class":272},[47,6845,1246],{"class":272},[47,6847,6849,6851,6853,6855,6857,6859,6861,6863,6865,6867,6869,6871,6873,6875,6877,6879,6881,6883,6885,6887,6889,6891,6893],{"class":49,"line":6848},47,[47,6850,6830],{"class":265},[47,6852,308],{"class":272},[47,6854,3852],{"class":335},[47,6856,339],{"class":884},[47,6858,3857],{"class":265},[47,6860,1711],{"class":272},[47,6862,3458],{"class":1707},[47,6864,1711],{"class":272},[47,6866,3458],{"class":1707},[47,6868,1711],{"class":272},[47,6870,4733],{"class":265},[47,6872,1711],{"class":272},[47,6874,4738],{"class":265},[47,6876,1711],{"class":272},[47,6878,3458],{"class":1707},[47,6880,1711],{"class":272},[47,6882,3458],{"class":1707},[47,6884,1711],{"class":272},[47,6886,4596],{"class":265},[47,6888,1711],{"class":272},[47,6890,4601],{"class":265},[47,6892,374],{"class":884},[47,6894,1246],{"class":272},[47,6896,6898],{"class":49,"line":6897},48,[47,6899,6658],{"class":272},[47,6901,6903],{"class":49,"line":6902},49,[47,6904,65],{"emptyLinePlaceholder":64},[47,6906,6908,6910,6912,6914,6916,6918,6920,6922,6924,6926,6928,6930,6932,6934,6936],{"class":49,"line":6907},50,[47,6909,6595],{"class":357},[47,6911,4773],{"class":335},[47,6913,339],{"class":272},[47,6915,4615],{"class":353},[47,6917,1711],{"class":272},[47,6919,4596],{"class":353},[47,6921,1711],{"class":272},[47,6923,4601],{"class":353},[47,6925,1711],{"class":272},[47,6927,4790],{"class":353},[47,6929,1711],{"class":272},[47,6931,4795],{"class":353},[47,6933,1711],{"class":272},[47,6935,4800],{"class":353},[47,6937,2123],{"class":272},[47,6939,6941,6943,6945,6947,6949],{"class":49,"line":6940},51,[47,6942,6790],{"class":357},[47,6944,4809],{"class":265},[47,6946,1654],{"class":272},[47,6948,4814],{"class":265},[47,6950,1246],{"class":272},[47,6952,6954,6956,6958,6960,6962,6964,6966,6968],{"class":49,"line":6953},52,[47,6955,6830],{"class":265},[47,6957,308],{"class":272},[47,6959,4825],{"class":265},[47,6961,1654],{"class":272},[47,6963,2710],{"class":272},[47,6965,4832],{"class":276},[47,6967,934],{"class":272},[47,6969,1246],{"class":272},[47,6971,6973,6975,6977,6979,6981],{"class":49,"line":6972},53,[47,6974,6830],{"class":265},[47,6976,308],{"class":272},[47,6978,4845],{"class":335},[47,6980,2070],{"class":884},[47,6982,1246],{"class":272},[47,6984,6986,6988,6990,6992,6994,6996,6998,7000,7002],{"class":49,"line":6985},54,[47,6987,6830],{"class":265},[47,6989,308],{"class":272},[47,6991,4858],{"class":335},[47,6993,339],{"class":884},[47,6995,3458],{"class":1707},[47,6997,1711],{"class":272},[47,6999,4809],{"class":265},[47,7001,374],{"class":884},[47,7003,1246],{"class":272},[47,7005,7007],{"class":49,"line":7006},55,[47,7008,65],{"emptyLinePlaceholder":64},[47,7010,7012,7015,7017,7019,7021,7023,7025,7027,7029,7031,7033,7035,7037,7039,7041,7043],{"class":49,"line":7011},56,[47,7013,7014],{"class":261},"            for",[47,7016,3718],{"class":884},[47,7018,3930],{"class":357},[47,7020,4886],{"class":265},[47,7022,319],{"class":272},[47,7024,3458],{"class":1707},[47,7026,4893],{"class":272},[47,7028,4886],{"class":265},[47,7030,4898],{"class":272},[47,7032,4901],{"class":265},[47,7034,4893],{"class":272},[47,7036,4886],{"class":265},[47,7038,4908],{"class":272},[47,7040,4911],{"class":1707},[47,7042,4914],{"class":884},[47,7044,342],{"class":272},[47,7046,7048,7051,7053,7055,7057,7059,7061,7063,7065,7067,7069,7071,7073,7075,7077,7079,7081,7083,7085,7087,7089,7091,7093],{"class":49,"line":7047},57,[47,7049,7050],{"class":357},"                var",[47,7052,4924],{"class":265},[47,7054,1654],{"class":272},[47,7056,4929],{"class":272},[47,7058,4795],{"class":265},[47,7060,4934],{"class":272},[47,7062,4937],{"class":265},[47,7064,308],{"class":272},[47,7066,4942],{"class":335},[47,7068,4945],{"class":884},[47,7070,4937],{"class":265},[47,7072,308],{"class":272},[47,7074,4952],{"class":265},[47,7076,3819],{"class":272},[47,7078,4800],{"class":265},[47,7080,374],{"class":884},[47,7082,4934],{"class":272},[47,7084,339],{"class":884},[47,7086,4790],{"class":265},[47,7088,4967],{"class":272},[47,7090,4970],{"class":265},[47,7092,4973],{"class":884},[47,7094,1246],{"class":272},[47,7096,7098,7101,7103,7105,7107,7109,7111,7113,7115,7117,7119],{"class":49,"line":7097},58,[47,7099,7100],{"class":265},"                ctx",[47,7102,308],{"class":272},[47,7104,4984],{"class":335},[47,7106,339],{"class":884},[47,7108,4970],{"class":265},[47,7110,1711],{"class":272},[47,7112,4924],{"class":265},[47,7114,4967],{"class":272},[47,7116,4997],{"class":265},[47,7118,374],{"class":884},[47,7120,1246],{"class":272},[47,7122,7124],{"class":49,"line":7123},59,[47,7125,3476],{"class":272},[47,7127,7129],{"class":49,"line":7128},60,[47,7130,65],{"emptyLinePlaceholder":64},[47,7132,7134,7136,7138,7140,7142,7144,7146,7148,7150],{"class":49,"line":7133},61,[47,7135,6830],{"class":265},[47,7137,308],{"class":272},[47,7139,4984],{"class":335},[47,7141,339],{"class":884},[47,7143,4596],{"class":265},[47,7145,1711],{"class":272},[47,7147,4601],{"class":265},[47,7149,374],{"class":884},[47,7151,1246],{"class":272},[47,7153,7155,7157,7159,7161,7163,7165,7167,7169,7171],{"class":49,"line":7154},62,[47,7156,6830],{"class":265},[47,7158,308],{"class":272},[47,7160,4984],{"class":335},[47,7162,339],{"class":884},[47,7164,3458],{"class":1707},[47,7166,1711],{"class":272},[47,7168,4601],{"class":265},[47,7170,374],{"class":884},[47,7172,1246],{"class":272},[47,7174,7176,7178,7180,7182,7184],{"class":49,"line":7175},63,[47,7177,6830],{"class":265},[47,7179,308],{"class":272},[47,7181,5058],{"class":335},[47,7183,2070],{"class":884},[47,7185,1246],{"class":272},[47,7187,7189],{"class":49,"line":7188},64,[47,7190,65],{"emptyLinePlaceholder":64},[47,7192,7194,7196,7198,7200,7202,7204,7206,7208,7210],{"class":49,"line":7193},65,[47,7195,6830],{"class":265},[47,7197,308],{"class":272},[47,7199,5078],{"class":265},[47,7201,1654],{"class":272},[47,7203,2710],{"class":272},[47,7205,5085],{"class":276},[47,7207,934],{"class":272},[47,7209,4893],{"class":272},[47,7211,5092],{"class":1047},[47,7213,7215,7217,7219,7221,7223],{"class":49,"line":7214},66,[47,7216,6830],{"class":265},[47,7218,308],{"class":272},[47,7220,5102],{"class":335},[47,7222,2070],{"class":884},[47,7224,1246],{"class":272},[47,7226,7228],{"class":49,"line":7227},67,[47,7229,6658],{"class":272},[47,7231,7233],{"class":49,"line":7232},68,[47,7234,65],{"emptyLinePlaceholder":64},[47,7236,7238],{"class":49,"line":7237},69,[47,7239,587],{"class":272},[47,7241,7243],{"class":49,"line":7242},70,[47,7244,599],{"class":272},[29,7246,7248],{"id":7247},"if-you-change-the-wave","If you change the wave",[13,7250,7251],{},"In this case,",[37,7253,7255],{"className":251,"code":7254,"language":254,"meta":42,"style":42},"var amplitude = 30;\nvar period = 600;\n\nfunction loop(){\n      ...\n      degree += 12;\n      },30)\n}\n",[44,7256,7257,7269,7281,7285,7293,7298,7308,7317],{"__ignoreMap":42},[47,7258,7259,7261,7263,7265,7267],{"class":49,"line":50},[47,7260,3930],{"class":357},[47,7262,4534],{"class":265},[47,7264,319],{"class":272},[47,7266,4539],{"class":1707},[47,7268,1246],{"class":272},[47,7270,7271,7273,7275,7277,7279],{"class":49,"line":56},[47,7272,3930],{"class":357},[47,7274,4548],{"class":265},[47,7276,319],{"class":272},[47,7278,6571],{"class":1707},[47,7280,1246],{"class":272},[47,7282,7283],{"class":49,"line":4},[47,7284,65],{"emptyLinePlaceholder":64},[47,7286,7287,7289,7291],{"class":49,"line":68},[47,7288,3639],{"class":357},[47,7290,6068],{"class":335},[47,7292,1612],{"class":272},[47,7294,7295],{"class":49,"line":74},[47,7296,7297],{"class":272},"      ...\n",[47,7299,7300,7302,7304,7306],{"class":49,"line":80},[47,7301,6140],{"class":265},[47,7303,6143],{"class":272},[47,7305,6146],{"class":1707},[47,7307,1246],{"class":272},[47,7309,7310,7313,7315],{"class":49,"line":85},[47,7311,7312],{"class":272},"      },",[47,7314,6159],{"class":1707},[47,7316,392],{"class":265},[47,7318,7319],{"class":49,"line":91},[47,7320,599],{"class":265},[13,7322,7323,7325,7326,7328,7329,7332,7333,7335],{},[44,7324,4633],{}," defines the wave's height and ",[44,7327,4638],{}," is the width of the wave and ",[44,7330,7331],{},"degree +="," is velocity. On the other, by changing the trigonometric function you configured in ",[44,7334,5258],{},", you can render",[29,7337,7339],{"id":7338},"at-last","At last",[13,7341,7342],{},"That is all how to make the image waved. Canvas element can render complex animation like this.",[766,7344,7345],{},"html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .s6YsC, html code.shiki .s6YsC{--shiki-default:#B2CCD6}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}",{"title":42,"searchDepth":4,"depth":4,"links":7347},[7348,7349,7352,7357,7365,7366,7367,7368],{"id":3280,"depth":56,"text":3281},{"id":3298,"depth":56,"text":3299,"children":7350},[7351],{"id":3342,"depth":4,"text":3343},{"id":3349,"depth":56,"text":3350,"children":7353},[7354],{"id":3625,"depth":4,"text":3626,"children":7355},[7356],{"id":4213,"depth":68,"text":4214},{"id":4426,"depth":56,"text":4427,"children":7358},[7359,7360],{"id":5131,"depth":4,"text":5132},{"id":5252,"depth":4,"text":5253,"children":7361},[7362,7363,7364],{"id":5612,"depth":68,"text":5613},{"id":5715,"depth":68,"text":5716},{"id":5983,"depth":68,"text":5984},{"id":6046,"depth":56,"text":6047},{"id":6227,"depth":56,"text":6228},{"id":7247,"depth":56,"text":7248},{"id":7338,"depth":56,"text":7339},[783],{},"\u002Fen\u002Farticles\u002Fjs-canvas-wave",{"title":3261,"description":3261},"en\u002Farticles\u002Fjs-canvas-wave",[794],"_mix\u002Fex01-768x299.png","XGsTAH2MWGO4JY7zi0vCtHnyPK984EuGs39M-dI4HT4",1780987140077]