[{"data":1,"prerenderedAt":4248},["ShallowReactive",2],{"en-article-js-canvas-wave":3},{"id":4,"title":5,"body":6,"category":4236,"createdAt":4238,"description":5,"extension":4239,"index":4238,"meta":4240,"navigation":535,"path":4241,"publish":535,"seo":4242,"series":4238,"seriesTitle":4238,"stem":4243,"tag":4244,"thumbnail":4246,"updatedAt":4238,"__hash__":4247},"en_articles\u002Fen\u002Farticles\u002Fjs-canvas-wave.md","How to make wave animation at bottom of the image with canvas",{"type":7,"value":8,"toc":4213},"minimark",[9,13,18,28,33,36,49,53,61,64,67,70,73,90,93,98,101,105,108,119,122,440,443,447,450,753,756,816,819,1015,1026,1042,1045,1050,1055,1065,1126,1129,1132,1159,1162,1244,1250,1257,1263,1266,1270,1276,1975,1978,1989,1992,1996,2107,2113,2117,2123,2439,2442,2462,2471,2474,2478,2546,2557,2562,2564,2575,2578,2582,2783,2786,2794,2820,2823,2847,2851,2854,2892,2905,2908,2910,2914,2923,3033,3043,3052,3092,3096,3099,4112,4116,4119,4188,4203,4207,4210],[10,11,12],"p",{},"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.",[14,15],"image-render",{":src":16,":width":17},"'_mix\u002Fex01-768x299.png'","'100%'",[10,19,20,27],{},[21,22,26],"a",{"href":23,"rel":24},"https:\u002F\u002Fapps.jun-app.com\u002Fwave\u002F",[25],"nofollow","Here,"," you can check it.",[29,30,32],"h2",{"id":31},"required-knowledge","Required knowledge",[10,34,35],{},"Before explaining detail, let's check the required knowledge and principle about web canvas animation. If you well know, skip this section.",[37,38,39,43,46],"ul",{},[40,41,42],"li",{},"how to set canvas with js",[40,44,45],{},"how to render image on canvas with js",[40,47,48],{},"Trigonometric function（very basic）",[29,50,52],{"id":51},"principle-of-canvas-animation","Principle of canvas animation",[10,54,55,56,60],{},"You can check the sample ",[21,57,59],{"href":23,"rel":58},[25],"here",", the animation is running correctly and I don't use movie. This animation is played on canvas element with javascript.",[10,62,63],{},"Waving images is difficult for using only div tag or img tag. The animation needs canvas element.",[10,65,66],{},"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.",[10,68,69],{},"It is hard to understand, so let's make figures.",[14,71],{":src":72,":width":17},"'_mix\u002Fwave01.jpeg'",[37,74,75,78,81,84,87],{},[40,76,77],{},"Specify the drawing point as indicated by the orange dot in coordinates（１）",[40,79,80],{},"Specify the drawing other points with trigonometric function.（２）",[40,82,83],{},"When the point arrive at edge of image, back it to first place. （３、４）",[40,85,86],{},"You can fill srrounded area with any colors, so fill transparently.（５）",[40,88,89],{},"Rerender image as soon and do 1~5 again.",[10,91,92],{},"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.",[94,95,97],"h3",{"id":96},"what-is-canvas","What is canvas?",[10,99,100],{},"Canvas is one of the HTML5 elements. It can draw 2D shapes, graphics and animation with javaScript. It makes complex animation and shapes.",[29,102,104],{"id":103},"render-image-on-canvas","Render image on canvas",[10,106,107],{},"At first, let's display image on canvas element. This time, put the below files at the same level.",[37,109,110,113,116],{},[40,111,112],{},"index.html",[40,114,115],{},"app.js",[40,117,118],{},"sample.jpg",[10,120,121],{},"sample.jpg is trimed with 1:2 (verical:horizon).Yeah, let's develop! First step, create HTML as below.",[123,124,129],"pre",{"className":125,"code":126,"language":127,"meta":128,"style":128},"language-html shiki shiki-themes material-theme-ocean","\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","html","",[130,131,132,152,162,173,199,221,231,241,258,270,276,284,315,320,330,340,350,360,387,396,422,431],"code",{"__ignoreMap":128},[133,134,137,141,145,149],"span",{"class":135,"line":136},"line",1,[133,138,140],{"class":139},"sAklC","\u003C!",[133,142,144],{"class":143},"s-wAU","DOCTYPE",[133,146,148],{"class":147},"sJ14y"," html",[133,150,151],{"class":139},">\n",[133,153,155,158,160],{"class":135,"line":154},2,[133,156,157],{"class":139},"\u003C",[133,159,127],{"class":143},[133,161,151],{"class":139},[133,163,165,168,171],{"class":135,"line":164},3,[133,166,167],{"class":139},"    \u003C",[133,169,170],{"class":143},"head",[133,172,151],{"class":139},[133,174,176,179,182,185,188,191,195,197],{"class":135,"line":175},4,[133,177,178],{"class":139},"        \u003C",[133,180,181],{"class":143},"meta",[133,183,184],{"class":147}," charset",[133,186,187],{"class":139},"=",[133,189,190],{"class":139},"\"",[133,192,194],{"class":193},"sfyAc","utf-8",[133,196,190],{"class":139},[133,198,151],{"class":139},[133,200,202,204,207,210,214,217,219],{"class":135,"line":201},5,[133,203,178],{"class":139},[133,205,206],{"class":143},"title",[133,208,209],{"class":139},">",[133,211,213],{"class":212},"s0W1g","waving image",[133,215,216],{"class":139},"\u003C\u002F",[133,218,206],{"class":143},[133,220,151],{"class":139},[133,222,224,226,229],{"class":135,"line":223},6,[133,225,178],{"class":139},[133,227,228],{"class":143},"style",[133,230,151],{"class":139},[133,232,234,238],{"class":135,"line":233},7,[133,235,237],{"class":236},"s5Dmg","            *",[133,239,240],{"class":139},"{\n",[133,242,244,248,251,255],{"class":135,"line":243},8,[133,245,247],{"class":246},"s6YsC","                margin",[133,249,250],{"class":139},":",[133,252,254],{"class":253},"sx098","0",[133,256,257],{"class":139},";\n",[133,259,261,264,266,268],{"class":135,"line":260},9,[133,262,263],{"class":246},"                padding",[133,265,250],{"class":139},[133,267,254],{"class":253},[133,269,257],{"class":139},[133,271,273],{"class":135,"line":272},10,[133,274,275],{"class":139},"            }\n",[133,277,279,282],{"class":135,"line":278},11,[133,280,281],{"class":236},"            main",[133,283,240],{"class":139},[133,285,287,290,292,296,299,302,305,308,310,312],{"class":135,"line":286},12,[133,288,289],{"class":246},"                background",[133,291,250],{"class":139},[133,293,295],{"class":294},"sdLwU","rgb",[133,297,298],{"class":139},"(",[133,300,301],{"class":253},"240",[133,303,304],{"class":139},",",[133,306,307],{"class":253}," 255",[133,309,304],{"class":139},[133,311,307],{"class":253},[133,313,314],{"class":139},");;\n",[133,316,318],{"class":135,"line":317},13,[133,319,275],{"class":139},[133,321,323,326,328],{"class":135,"line":322},14,[133,324,325],{"class":139},"        \u003C\u002F",[133,327,228],{"class":143},[133,329,151],{"class":139},[133,331,333,336,338],{"class":135,"line":332},15,[133,334,335],{"class":139},"    \u003C\u002F",[133,337,170],{"class":143},[133,339,151],{"class":139},[133,341,343,345,348],{"class":135,"line":342},16,[133,344,167],{"class":139},[133,346,347],{"class":143},"body",[133,349,151],{"class":139},[133,351,353,355,358],{"class":135,"line":352},17,[133,354,178],{"class":139},[133,356,357],{"class":143},"main",[133,359,151],{"class":139},[133,361,363,366,369,372,374,376,378,380,383,385],{"class":135,"line":362},18,[133,364,365],{"class":139},"            \u003C",[133,367,368],{"class":143},"canvas",[133,370,371],{"class":147}," id",[133,373,187],{"class":139},[133,375,190],{"class":139},[133,377,368],{"class":193},[133,379,190],{"class":139},[133,381,382],{"class":139},">\u003C\u002F",[133,384,368],{"class":143},[133,386,151],{"class":139},[133,388,390,392,394],{"class":135,"line":389},19,[133,391,325],{"class":139},[133,393,357],{"class":143},[133,395,151],{"class":139},[133,397,399,401,404,407,409,411,414,416,418,420],{"class":135,"line":398},20,[133,400,178],{"class":139},[133,402,403],{"class":143},"script",[133,405,406],{"class":147}," src",[133,408,187],{"class":139},[133,410,190],{"class":139},[133,412,413],{"class":193},".\u002Fapp.js",[133,415,190],{"class":139},[133,417,382],{"class":139},[133,419,403],{"class":143},[133,421,151],{"class":139},[133,423,425,427,429],{"class":135,"line":424},21,[133,426,335],{"class":139},[133,428,347],{"class":143},[133,430,151],{"class":139},[133,432,434,436,438],{"class":135,"line":433},22,[133,435,216],{"class":139},[133,437,127],{"class":143},[133,439,151],{"class":139},[10,441,442],{},"Prepare canvas element which has id to detect with javascript.　Next step, write js file.",[94,444,446],{"id":445},"get-target-canvas-element-by-javascript","Get target canvas element by Javascript",[10,448,449],{},"Write app.js code as below.",[123,451,455],{"className":452,"code":453,"language":454,"meta":128,"style":128},"language-javascript shiki shiki-themes material-theme-ocean","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","javascript",[130,456,457,468,502,531,537,560,580,596,600,629,660,676,743,748],{"__ignoreMap":128},[133,458,459,462,465],{"class":135,"line":136},[133,460,461],{"class":147},"function",[133,463,464],{"class":294}," initAnimation",[133,466,467],{"class":139},"(){\n",[133,469,470,473,476,479,482,485,488,490,493,495,497,500],{"class":135,"line":154},[133,471,472],{"class":147},"    var",[133,474,475],{"class":212}," canvas",[133,477,478],{"class":139}," =",[133,480,481],{"class":212}," document",[133,483,484],{"class":139},".",[133,486,487],{"class":294},"getElementById",[133,489,298],{"class":143},[133,491,492],{"class":139},"'",[133,494,368],{"class":193},[133,496,492],{"class":139},[133,498,499],{"class":143},")",[133,501,257],{"class":139},[133,503,504,506,509,511,513,515,518,520,522,525,527,529],{"class":135,"line":164},[133,505,472],{"class":147},[133,507,508],{"class":212}," ctx",[133,510,478],{"class":139},[133,512,475],{"class":212},[133,514,484],{"class":139},[133,516,517],{"class":294},"getContext",[133,519,298],{"class":143},[133,521,492],{"class":139},[133,523,524],{"class":193},"2d",[133,526,492],{"class":139},[133,528,499],{"class":143},[133,530,257],{"class":139},[133,532,533],{"class":135,"line":175},[133,534,536],{"emptyLinePlaceholder":535},true,"\n",[133,538,539,541,544,546,549,551,554,556,558],{"class":135,"line":201},[133,540,472],{"class":147},[133,542,543],{"class":212}," imagePath",[133,545,478],{"class":139},[133,547,548],{"class":143}," (",[133,550,492],{"class":139},[133,552,553],{"class":193},".\u002Fsample.jpg",[133,555,492],{"class":139},[133,557,499],{"class":143},[133,559,257],{"class":139},[133,561,562,564,567,569,572,575,578],{"class":135,"line":223},[133,563,472],{"class":147},[133,565,566],{"class":212}," image",[133,568,478],{"class":139},[133,570,571],{"class":139}," new",[133,573,574],{"class":294}," Image",[133,576,577],{"class":143},"()",[133,579,257],{"class":139},[133,581,582,585,587,590,592,594],{"class":135,"line":233},[133,583,584],{"class":212},"    image",[133,586,484],{"class":139},[133,588,589],{"class":212},"src",[133,591,478],{"class":139},[133,593,543],{"class":212},[133,595,257],{"class":139},[133,597,598],{"class":135,"line":243},[133,599,536],{"emptyLinePlaceholder":535},[133,601,602,605,607,610,612,615,617,620,622,625,627],{"class":135,"line":260},[133,603,604],{"class":212},"    canvas",[133,606,484],{"class":139},[133,608,609],{"class":212},"width",[133,611,478],{"class":139},[133,613,614],{"class":294}," Number",[133,616,298],{"class":143},[133,618,619],{"class":212},"window",[133,621,484],{"class":139},[133,623,624],{"class":212},"innerWidth",[133,626,499],{"class":143},[133,628,257],{"class":139},[133,630,631,633,635,638,640,642,644,646,648,650,653,656,658],{"class":135,"line":272},[133,632,604],{"class":212},[133,634,484],{"class":139},[133,636,637],{"class":212},"height",[133,639,478],{"class":139},[133,641,614],{"class":294},[133,643,298],{"class":143},[133,645,368],{"class":212},[133,647,484],{"class":139},[133,649,609],{"class":212},[133,651,652],{"class":139},"\u002F",[133,654,655],{"class":253},"2",[133,657,499],{"class":143},[133,659,257],{"class":139},[133,661,662,664,666,669,671,674],{"class":135,"line":278},[133,663,584],{"class":212},[133,665,484],{"class":139},[133,667,668],{"class":294},"onload",[133,670,478],{"class":139},[133,672,673],{"class":147}," function",[133,675,467],{"class":139},[133,677,678,681,683,686,688,691,693,695,697,699,701,703,705,707,709,711,713,715,717,719,721,723,725,727,729,731,733,735,737,739,741],{"class":135,"line":286},[133,679,680],{"class":212},"          ctx",[133,682,484],{"class":139},[133,684,685],{"class":294},"drawImage",[133,687,298],{"class":143},[133,689,690],{"class":212},"image",[133,692,304],{"class":139},[133,694,254],{"class":253},[133,696,304],{"class":139},[133,698,254],{"class":253},[133,700,304],{"class":139},[133,702,690],{"class":212},[133,704,484],{"class":139},[133,706,609],{"class":212},[133,708,304],{"class":139},[133,710,690],{"class":212},[133,712,484],{"class":139},[133,714,637],{"class":212},[133,716,304],{"class":139},[133,718,254],{"class":253},[133,720,304],{"class":139},[133,722,254],{"class":253},[133,724,304],{"class":139},[133,726,368],{"class":212},[133,728,484],{"class":139},[133,730,609],{"class":212},[133,732,304],{"class":139},[133,734,368],{"class":212},[133,736,484],{"class":139},[133,738,637],{"class":212},[133,740,499],{"class":143},[133,742,257],{"class":139},[133,744,745],{"class":135,"line":317},[133,746,747],{"class":139},"    }\n",[133,749,750],{"class":135,"line":322},[133,751,752],{"class":139},"}\n",[10,754,755],{},"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).",[123,757,759],{"className":452,"code":758,"language":454,"meta":128,"style":128},"var canvas = document.getElementById('canvas');\nvar ctx = canvas.getContext('2d');\n",[130,760,761,789],{"__ignoreMap":128},[133,762,763,766,769,771,773,775,777,779,781,783,785,787],{"class":135,"line":136},[133,764,765],{"class":147},"var",[133,767,768],{"class":212}," canvas ",[133,770,187],{"class":139},[133,772,481],{"class":212},[133,774,484],{"class":139},[133,776,487],{"class":294},[133,778,298],{"class":212},[133,780,492],{"class":139},[133,782,368],{"class":193},[133,784,492],{"class":139},[133,786,499],{"class":212},[133,788,257],{"class":139},[133,790,791,793,796,798,800,802,804,806,808,810,812,814],{"class":135,"line":154},[133,792,765],{"class":147},[133,794,795],{"class":212}," ctx ",[133,797,187],{"class":139},[133,799,475],{"class":212},[133,801,484],{"class":139},[133,803,517],{"class":294},[133,805,298],{"class":212},[133,807,492],{"class":139},[133,809,524],{"class":193},[133,811,492],{"class":139},[133,813,499],{"class":212},[133,815,257],{"class":139},[10,817,818],{},"and",[123,820,822],{"className":452,"code":821,"language":454,"meta":128,"style":128},"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",[130,823,824,845,862,877,881,904,932,946,1011],{"__ignoreMap":128},[133,825,826,828,831,833,835,837,839,841,843],{"class":135,"line":136},[133,827,765],{"class":147},[133,829,830],{"class":212}," imagePath ",[133,832,187],{"class":139},[133,834,548],{"class":212},[133,836,492],{"class":139},[133,838,553],{"class":193},[133,840,492],{"class":139},[133,842,499],{"class":212},[133,844,257],{"class":139},[133,846,847,849,852,854,856,858,860],{"class":135,"line":154},[133,848,765],{"class":147},[133,850,851],{"class":212}," image ",[133,853,187],{"class":139},[133,855,571],{"class":139},[133,857,574],{"class":294},[133,859,577],{"class":212},[133,861,257],{"class":139},[133,863,864,866,868,871,873,875],{"class":135,"line":164},[133,865,690],{"class":212},[133,867,484],{"class":139},[133,869,870],{"class":212},"src ",[133,872,187],{"class":139},[133,874,543],{"class":212},[133,876,257],{"class":139},[133,878,879],{"class":135,"line":175},[133,880,536],{"emptyLinePlaceholder":535},[133,882,883,885,887,890,892,894,897,899,902],{"class":135,"line":201},[133,884,368],{"class":212},[133,886,484],{"class":139},[133,888,889],{"class":212},"width ",[133,891,187],{"class":139},[133,893,614],{"class":294},[133,895,896],{"class":212},"(window",[133,898,484],{"class":139},[133,900,901],{"class":212},"innerWidth)",[133,903,257],{"class":139},[133,905,906,908,910,913,915,917,920,922,924,926,928,930],{"class":135,"line":223},[133,907,368],{"class":212},[133,909,484],{"class":139},[133,911,912],{"class":212},"height ",[133,914,187],{"class":139},[133,916,614],{"class":294},[133,918,919],{"class":212},"(canvas",[133,921,484],{"class":139},[133,923,609],{"class":212},[133,925,652],{"class":139},[133,927,655],{"class":253},[133,929,499],{"class":212},[133,931,257],{"class":139},[133,933,934,936,938,940,942,944],{"class":135,"line":233},[133,935,690],{"class":212},[133,937,484],{"class":139},[133,939,668],{"class":294},[133,941,478],{"class":139},[133,943,673],{"class":147},[133,945,467],{"class":139},[133,947,948,951,953,955,957,959,961,963,965,967,969,971,973,975,977,979,981,983,985,987,989,991,993,995,997,999,1001,1003,1005,1007,1009],{"class":135,"line":243},[133,949,950],{"class":212},"        ctx",[133,952,484],{"class":139},[133,954,685],{"class":294},[133,956,298],{"class":143},[133,958,690],{"class":212},[133,960,304],{"class":139},[133,962,254],{"class":253},[133,964,304],{"class":139},[133,966,254],{"class":253},[133,968,304],{"class":139},[133,970,690],{"class":212},[133,972,484],{"class":139},[133,974,609],{"class":212},[133,976,304],{"class":139},[133,978,690],{"class":212},[133,980,484],{"class":139},[133,982,637],{"class":212},[133,984,304],{"class":139},[133,986,254],{"class":253},[133,988,304],{"class":139},[133,990,254],{"class":253},[133,992,304],{"class":139},[133,994,368],{"class":212},[133,996,484],{"class":139},[133,998,609],{"class":212},[133,1000,304],{"class":139},[133,1002,368],{"class":212},[133,1004,484],{"class":139},[133,1006,637],{"class":212},[133,1008,499],{"class":143},[133,1010,257],{"class":139},[133,1012,1013],{"class":135,"line":260},[133,1014,752],{"class":139},[10,1016,1017,1018,1021,1022,1025],{},"Set image's path to src property using Image Object. Set canvas size with ",[130,1019,1020],{},"canvas.width"," and ",[130,1023,1024],{},"canvas.height",". So image ratio is 1:2, make canvas's ratio same.",[10,1027,1028,1031,1032,1035,1036,1038,1039,1041],{},[130,1029,1030],{},"image.onload"," run callback after image loaded.\n",[130,1033,1034],{},"drawImage()"," method renders image on canvas。\n",[130,1037,1034],{}," must be run after ",[130,1040,1030],{}," to set image.",[10,1043,1044],{},"Anyway, run script. Image will be rendered even you don't use img tag.",[14,1046],{":src":1047,":width":1048,":center":1049},"'_mix\u002Fwave02.png'","'500px'","true",[1051,1052,1054],"h4",{"id":1053},"how-to-use-drawimage","How to use drawImage()",[10,1056,1057,1059,1060],{},[130,1058,1034],{}," draws image on canvas specify range. If you render image at whole canvas, you should enter all arguments.",[21,1061,1064],{"href":1062,"rel":1063},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FCanvasRenderingContext2D\u002FdrawImage",[25],"（MDN）",[123,1066,1068],{"className":452,"code":1067,"language":454,"meta":128,"style":128},"void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);\n",[130,1069,1070],{"__ignoreMap":128},[133,1071,1072,1075,1077,1079,1081,1084,1086,1089,1091,1094,1096,1099,1101,1104,1106,1109,1111,1114,1116,1119,1121,1124],{"class":135,"line":136},[133,1073,1074],{"class":139},"void",[133,1076,508],{"class":212},[133,1078,484],{"class":139},[133,1080,685],{"class":294},[133,1082,1083],{"class":212},"(image",[133,1085,304],{"class":139},[133,1087,1088],{"class":212}," sx",[133,1090,304],{"class":139},[133,1092,1093],{"class":212}," sy",[133,1095,304],{"class":139},[133,1097,1098],{"class":212}," sWidth",[133,1100,304],{"class":139},[133,1102,1103],{"class":212}," sHeight",[133,1105,304],{"class":139},[133,1107,1108],{"class":212}," dx",[133,1110,304],{"class":139},[133,1112,1113],{"class":212}," dy",[133,1115,304],{"class":139},[133,1117,1118],{"class":212}," dWidth",[133,1120,304],{"class":139},[133,1122,1123],{"class":212}," dHeight)",[133,1125,257],{"class":139},[10,1127,1128],{},"Let me explain about arguments.",[10,1130,1131],{},"Image instance as well target image.",[1133,1134,1135,1138,1141,1144,1147,1150,1153,1156],"ol",{},[40,1136,1137],{},"X coordinate of the image cropping start point",[40,1139,1140],{},"Y coordinate of the image cropping start point",[40,1142,1143],{},"Distance in the X direction to cut out from the X coordinate specified by the second argument（width）",[40,1145,1146],{},"Distance in the Y direction to cut out from the Y coordinate specified by the third argument（height）",[40,1148,1149],{},"X coordinate of the starting point to draw on canvas.",[40,1151,1152],{},"Y coordinate of the starting point to draw on canvas",[40,1154,1155],{},"Distance in the X direction to draw from the X coordinate specified by the 6th argument（width）",[40,1157,1158],{},"Distance (height) in the Y direction to draw from the Y coordinate specified by the 7th argument（height）",[10,1160,1161],{},"Like this.\nIn my example this time,",[123,1163,1165],{"className":452,"code":1164,"language":454,"meta":128,"style":128},"ctx.drawImage(\n    image,\n    0,0,image.width,image.height,\n    0,0,canvas.width,canvas.height\n);\n",[130,1166,1167,1179,1186,1213,1238],{"__ignoreMap":128},[133,1168,1169,1172,1174,1176],{"class":135,"line":136},[133,1170,1171],{"class":212},"ctx",[133,1173,484],{"class":139},[133,1175,685],{"class":294},[133,1177,1178],{"class":212},"(\n",[133,1180,1181,1183],{"class":135,"line":154},[133,1182,584],{"class":212},[133,1184,1185],{"class":139},",\n",[133,1187,1188,1191,1193,1195,1197,1199,1201,1203,1205,1207,1209,1211],{"class":135,"line":164},[133,1189,1190],{"class":253},"    0",[133,1192,304],{"class":139},[133,1194,254],{"class":253},[133,1196,304],{"class":139},[133,1198,690],{"class":212},[133,1200,484],{"class":139},[133,1202,609],{"class":212},[133,1204,304],{"class":139},[133,1206,690],{"class":212},[133,1208,484],{"class":139},[133,1210,637],{"class":212},[133,1212,1185],{"class":139},[133,1214,1215,1217,1219,1221,1223,1225,1227,1229,1231,1233,1235],{"class":135,"line":175},[133,1216,1190],{"class":253},[133,1218,304],{"class":139},[133,1220,254],{"class":253},[133,1222,304],{"class":139},[133,1224,368],{"class":212},[133,1226,484],{"class":139},[133,1228,609],{"class":212},[133,1230,304],{"class":139},[133,1232,368],{"class":212},[133,1234,484],{"class":139},[133,1236,1237],{"class":212},"height\n",[133,1239,1240,1242],{"class":135,"line":201},[133,1241,499],{"class":212},[133,1243,257],{"class":139},[10,1245,1246,1249],{},[130,1247,1248],{},"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.",[10,1251,1252,1253,1256],{},"If you set ",[130,1254,1255],{},"0,0,image.width\u002F2,image.height\u002F2",", canvas displays 1\u002F4 size of original image.",[10,1258,1259,1262],{},[130,1260,1261],{},"0,0,canvas.width,canvas.height"," paste the image on canvas from (0,0) coordinate point by the canvas's width and height.",[10,1264,1265],{},"When you change ratio on code, you will well understand what I write above.",[29,1267,1269],{"id":1268},"cut-image-by-wave-shape","Cut image by wave shape",[10,1271,1272,1273,1275],{},"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 ",[130,1274,1030],{}," function.",[123,1277,1279],{"className":452,"code":1278,"language":454,"meta":128,"style":128},"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",[130,1280,1281,1295,1304,1308,1313,1330,1347,1367,1371,1385,1399,1413,1417,1426,1449,1486,1490,1494,1518,1536,1553,1604,1608,1613,1650,1665,1687,1701,1723,1728,1772,1832,1859,1864,1869,1890,1911,1925,1930,1956,1970],{"__ignoreMap":128},[133,1282,1283,1285,1287,1289,1291,1293],{"class":135,"line":136},[133,1284,690],{"class":212},[133,1286,484],{"class":139},[133,1288,668],{"class":294},[133,1290,478],{"class":139},[133,1292,673],{"class":147},[133,1294,467],{"class":139},[133,1296,1297,1300,1302],{"class":135,"line":154},[133,1298,1299],{"class":294},"    initDraw",[133,1301,577],{"class":143},[133,1303,257],{"class":139},[133,1305,1306],{"class":135,"line":164},[133,1307,752],{"class":139},[133,1309,1310],{"class":135,"line":175},[133,1311,1312],{"class":212},"    \n",[133,1314,1315,1317,1320,1322,1324,1326,1328],{"class":135,"line":201},[133,1316,765],{"class":147},[133,1318,1319],{"class":212}," canvasEndX ",[133,1321,187],{"class":139},[133,1323,475],{"class":212},[133,1325,484],{"class":139},[133,1327,609],{"class":212},[133,1329,257],{"class":139},[133,1331,1332,1334,1337,1339,1341,1343,1345],{"class":135,"line":223},[133,1333,765],{"class":147},[133,1335,1336],{"class":212}," canvasEndY ",[133,1338,187],{"class":139},[133,1340,475],{"class":212},[133,1342,484],{"class":139},[133,1344,637],{"class":212},[133,1346,257],{"class":139},[133,1348,1349,1351,1354,1356,1359,1362,1365],{"class":135,"line":233},[133,1350,765],{"class":147},[133,1352,1353],{"class":212}," waveStartPoint ",[133,1355,187],{"class":139},[133,1357,1358],{"class":212}," canvasEndY",[133,1360,1361],{"class":139},"-",[133,1363,1364],{"class":253},"150",[133,1366,257],{"class":139},[133,1368,1369],{"class":135,"line":243},[133,1370,536],{"emptyLinePlaceholder":535},[133,1372,1373,1375,1378,1380,1383],{"class":135,"line":260},[133,1374,765],{"class":147},[133,1376,1377],{"class":212}," amplitude ",[133,1379,187],{"class":139},[133,1381,1382],{"class":253}," 30",[133,1384,257],{"class":139},[133,1386,1387,1389,1392,1394,1397],{"class":135,"line":272},[133,1388,765],{"class":147},[133,1390,1391],{"class":212}," period ",[133,1393,187],{"class":139},[133,1395,1396],{"class":253}," 1000",[133,1398,257],{"class":139},[133,1400,1401,1403,1406,1408,1411],{"class":135,"line":278},[133,1402,765],{"class":147},[133,1404,1405],{"class":212}," degree ",[133,1407,187],{"class":139},[133,1409,1410],{"class":253}," 0",[133,1412,257],{"class":139},[133,1414,1415],{"class":135,"line":286},[133,1416,536],{"emptyLinePlaceholder":535},[133,1418,1419,1421,1424],{"class":135,"line":317},[133,1420,461],{"class":147},[133,1422,1423],{"class":294}," initDraw",[133,1425,467],{"class":139},[133,1427,1428,1431,1433,1435,1437,1440,1442,1445,1447],{"class":135,"line":322},[133,1429,1430],{"class":294},"    imageSet",[133,1432,298],{"class":143},[133,1434,690],{"class":212},[133,1436,304],{"class":139},[133,1438,1439],{"class":212},"canvasEndX",[133,1441,304],{"class":139},[133,1443,1444],{"class":212},"canvasEndY",[133,1446,499],{"class":143},[133,1448,257],{"class":139},[133,1450,1451,1454,1456,1459,1461,1463,1465,1467,1469,1472,1474,1477,1479,1482,1484],{"class":135,"line":332},[133,1452,1453],{"class":294},"    waveDrawing",[133,1455,298],{"class":143},[133,1457,1458],{"class":212},"waveStartPoint",[133,1460,304],{"class":139},[133,1462,1439],{"class":212},[133,1464,304],{"class":139},[133,1466,1444],{"class":212},[133,1468,304],{"class":139},[133,1470,1471],{"class":212},"degree",[133,1473,304],{"class":139},[133,1475,1476],{"class":212},"amplitude",[133,1478,304],{"class":139},[133,1480,1481],{"class":212},"period",[133,1483,499],{"class":143},[133,1485,257],{"class":139},[133,1487,1488],{"class":135,"line":342},[133,1489,752],{"class":139},[133,1491,1492],{"class":135,"line":352},[133,1493,536],{"emptyLinePlaceholder":535},[133,1495,1496,1498,1501,1503,1507,1509,1511,1513,1515],{"class":135,"line":362},[133,1497,461],{"class":147},[133,1499,1500],{"class":294}," imageSet",[133,1502,298],{"class":139},[133,1504,1506],{"class":1505},"s7ZW3","imageObj",[133,1508,304],{"class":139},[133,1510,1439],{"class":1505},[133,1512,304],{"class":139},[133,1514,1444],{"class":1505},[133,1516,1517],{"class":139},"){\n",[133,1519,1520,1522,1525,1527,1530,1532,1534],{"class":135,"line":389},[133,1521,472],{"class":147},[133,1523,1524],{"class":212}," imgWidth",[133,1526,478],{"class":139},[133,1528,1529],{"class":212}," imageObj",[133,1531,484],{"class":139},[133,1533,609],{"class":212},[133,1535,257],{"class":139},[133,1537,1538,1540,1543,1545,1547,1549,1551],{"class":135,"line":398},[133,1539,472],{"class":147},[133,1541,1542],{"class":212}," imgHeight",[133,1544,478],{"class":139},[133,1546,1529],{"class":212},[133,1548,484],{"class":139},[133,1550,637],{"class":212},[133,1552,257],{"class":139},[133,1554,1555,1558,1560,1562,1564,1566,1568,1570,1572,1574,1576,1579,1581,1584,1586,1588,1590,1592,1594,1596,1598,1600,1602],{"class":135,"line":424},[133,1556,1557],{"class":212},"    ctx",[133,1559,484],{"class":139},[133,1561,685],{"class":294},[133,1563,298],{"class":143},[133,1565,690],{"class":212},[133,1567,304],{"class":139},[133,1569,254],{"class":253},[133,1571,304],{"class":139},[133,1573,254],{"class":253},[133,1575,304],{"class":139},[133,1577,1578],{"class":212},"imgWidth",[133,1580,304],{"class":139},[133,1582,1583],{"class":212},"imgHeight",[133,1585,304],{"class":139},[133,1587,254],{"class":253},[133,1589,304],{"class":139},[133,1591,254],{"class":253},[133,1593,304],{"class":139},[133,1595,1439],{"class":212},[133,1597,304],{"class":139},[133,1599,1444],{"class":212},[133,1601,499],{"class":143},[133,1603,257],{"class":139},[133,1605,1606],{"class":135,"line":433},[133,1607,752],{"class":139},[133,1609,1611],{"class":135,"line":1610},23,[133,1612,536],{"emptyLinePlaceholder":535},[133,1614,1616,1618,1621,1623,1625,1627,1629,1631,1633,1635,1638,1640,1643,1645,1648],{"class":135,"line":1615},24,[133,1617,461],{"class":147},[133,1619,1620],{"class":294}," waveDrawing",[133,1622,298],{"class":139},[133,1624,1458],{"class":1505},[133,1626,304],{"class":139},[133,1628,1439],{"class":1505},[133,1630,304],{"class":139},[133,1632,1444],{"class":1505},[133,1634,304],{"class":139},[133,1636,1637],{"class":1505},"deg",[133,1639,304],{"class":139},[133,1641,1642],{"class":1505},"am",[133,1644,304],{"class":139},[133,1646,1647],{"class":1505},"tp",[133,1649,1517],{"class":139},[133,1651,1653,1655,1658,1660,1663],{"class":135,"line":1652},25,[133,1654,472],{"class":147},[133,1656,1657],{"class":212}," waveStartY",[133,1659,478],{"class":139},[133,1661,1662],{"class":212}," waveStartPoint",[133,1664,257],{"class":139},[133,1666,1668,1670,1672,1675,1677,1680,1683,1685],{"class":135,"line":1667},26,[133,1669,1557],{"class":212},[133,1671,484],{"class":139},[133,1673,1674],{"class":212},"globalCompositeOperation",[133,1676,478],{"class":139},[133,1678,1679],{"class":139}," \"",[133,1681,1682],{"class":193},"destination-out",[133,1684,190],{"class":139},[133,1686,257],{"class":139},[133,1688,1690,1692,1694,1697,1699],{"class":135,"line":1689},27,[133,1691,1557],{"class":212},[133,1693,484],{"class":139},[133,1695,1696],{"class":294},"beginPath",[133,1698,577],{"class":143},[133,1700,257],{"class":139},[133,1702,1704,1706,1708,1711,1713,1715,1717,1719,1721],{"class":135,"line":1703},28,[133,1705,1557],{"class":212},[133,1707,484],{"class":139},[133,1709,1710],{"class":294},"moveTo",[133,1712,298],{"class":143},[133,1714,254],{"class":253},[133,1716,304],{"class":139},[133,1718,1657],{"class":212},[133,1720,499],{"class":143},[133,1722,257],{"class":139},[133,1724,1726],{"class":135,"line":1725},29,[133,1727,536],{"emptyLinePlaceholder":535},[133,1729,1731,1735,1737,1739,1742,1744,1746,1749,1751,1754,1757,1759,1761,1764,1767,1770],{"class":135,"line":1730},30,[133,1732,1734],{"class":1733},"s6cf3","    for",[133,1736,548],{"class":143},[133,1738,765],{"class":147},[133,1740,1741],{"class":212}," x",[133,1743,187],{"class":139},[133,1745,254],{"class":253},[133,1747,1748],{"class":139},";",[133,1750,1741],{"class":212},[133,1752,1753],{"class":139}," \u003C=",[133,1755,1756],{"class":212}," canvasEndX",[133,1758,1748],{"class":139},[133,1760,1741],{"class":212},[133,1762,1763],{"class":139},"+=",[133,1765,1766],{"class":253}," 1",[133,1768,1769],{"class":143},") ",[133,1771,240],{"class":139},[133,1773,1775,1778,1781,1783,1786,1788,1791,1794,1796,1799,1802,1804,1806,1809,1811,1813,1815,1817,1819,1821,1824,1827,1830],{"class":135,"line":1774},31,[133,1776,1777],{"class":147},"        var",[133,1779,1780],{"class":212}," y",[133,1782,478],{"class":139},[133,1784,1785],{"class":139}," -",[133,1787,1642],{"class":212},[133,1789,1790],{"class":139},"*",[133,1792,1793],{"class":212},"Math",[133,1795,484],{"class":139},[133,1797,1798],{"class":294},"sin",[133,1800,1801],{"class":143},"((",[133,1803,1793],{"class":212},[133,1805,484],{"class":139},[133,1807,1808],{"class":212},"PI",[133,1810,652],{"class":139},[133,1812,1647],{"class":212},[133,1814,499],{"class":143},[133,1816,1790],{"class":139},[133,1818,298],{"class":143},[133,1820,1637],{"class":212},[133,1822,1823],{"class":139},"+",[133,1825,1826],{"class":212},"x",[133,1828,1829],{"class":143},"))",[133,1831,257],{"class":139},[133,1833,1835,1837,1839,1842,1844,1846,1848,1850,1852,1855,1857],{"class":135,"line":1834},32,[133,1836,950],{"class":212},[133,1838,484],{"class":139},[133,1840,1841],{"class":294},"lineTo",[133,1843,298],{"class":143},[133,1845,1826],{"class":212},[133,1847,304],{"class":139},[133,1849,1780],{"class":212},[133,1851,1823],{"class":139},[133,1853,1854],{"class":212},"waveStartY",[133,1856,499],{"class":143},[133,1858,257],{"class":139},[133,1860,1862],{"class":135,"line":1861},33,[133,1863,747],{"class":139},[133,1865,1867],{"class":135,"line":1866},34,[133,1868,536],{"emptyLinePlaceholder":535},[133,1870,1872,1874,1876,1878,1880,1882,1884,1886,1888],{"class":135,"line":1871},35,[133,1873,1557],{"class":212},[133,1875,484],{"class":139},[133,1877,1841],{"class":294},[133,1879,298],{"class":143},[133,1881,1439],{"class":212},[133,1883,304],{"class":139},[133,1885,1444],{"class":212},[133,1887,499],{"class":143},[133,1889,257],{"class":139},[133,1891,1893,1895,1897,1899,1901,1903,1905,1907,1909],{"class":135,"line":1892},36,[133,1894,1557],{"class":212},[133,1896,484],{"class":139},[133,1898,1841],{"class":294},[133,1900,298],{"class":143},[133,1902,254],{"class":253},[133,1904,304],{"class":139},[133,1906,1444],{"class":212},[133,1908,499],{"class":143},[133,1910,257],{"class":139},[133,1912,1914,1916,1918,1921,1923],{"class":135,"line":1913},37,[133,1915,1557],{"class":212},[133,1917,484],{"class":139},[133,1919,1920],{"class":294},"closePath",[133,1922,577],{"class":143},[133,1924,257],{"class":139},[133,1926,1928],{"class":135,"line":1927},38,[133,1929,536],{"emptyLinePlaceholder":535},[133,1931,1933,1936,1938,1941,1943,1945,1948,1950,1952],{"class":135,"line":1932},39,[133,1934,1935],{"class":212},"    　ctx",[133,1937,484],{"class":139},[133,1939,1940],{"class":212},"fillStyle",[133,1942,478],{"class":139},[133,1944,1679],{"class":139},[133,1946,1947],{"class":193},"rgba(255,255,255,1)",[133,1949,190],{"class":139},[133,1951,1748],{"class":139},[133,1953,1955],{"class":1954},"sC9rS"," \u002F\u002Fopacity 1\n",[133,1957,1959,1961,1963,1966,1968],{"class":135,"line":1958},40,[133,1960,1557],{"class":212},[133,1962,484],{"class":139},[133,1964,1965],{"class":294},"fill",[133,1967,577],{"class":143},[133,1969,257],{"class":139},[133,1971,1973],{"class":135,"line":1972},41,[133,1974,752],{"class":139},[10,1976,1977],{},"I make new three functions there.",[37,1979,1980,1983,1986],{},[40,1981,1982],{},"initDraw()：Call below two function.",[40,1984,1985],{},"imageSet()：Render image on canvas. If it is already rendered, clear it.",[40,1987,1988],{},"waveDrawing()：Cut image by wave shape",[10,1990,1991],{},"I explain these.",[94,1993,1995],{"id":1994},"imagesetrender-image-on-canvas","imageSet():Render image on canvas.",[123,1997,1999],{"className":452,"code":1998,"language":454,"meta":128,"style":128},"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",[130,2000,2001,2021,2038,2054,2103],{"__ignoreMap":128},[133,2002,2003,2005,2007,2009,2011,2013,2015,2017,2019],{"class":135,"line":136},[133,2004,461],{"class":147},[133,2006,1500],{"class":294},[133,2008,298],{"class":139},[133,2010,1506],{"class":1505},[133,2012,304],{"class":139},[133,2014,1439],{"class":1505},[133,2016,304],{"class":139},[133,2018,1444],{"class":1505},[133,2020,1517],{"class":139},[133,2022,2023,2026,2028,2030,2032,2034,2036],{"class":135,"line":154},[133,2024,2025],{"class":147},"     var",[133,2027,1524],{"class":212},[133,2029,478],{"class":139},[133,2031,1529],{"class":212},[133,2033,484],{"class":139},[133,2035,609],{"class":212},[133,2037,257],{"class":139},[133,2039,2040,2042,2044,2046,2048,2050,2052],{"class":135,"line":164},[133,2041,2025],{"class":147},[133,2043,1542],{"class":212},[133,2045,478],{"class":139},[133,2047,1529],{"class":212},[133,2049,484],{"class":139},[133,2051,637],{"class":212},[133,2053,257],{"class":139},[133,2055,2056,2059,2061,2063,2065,2067,2069,2071,2073,2075,2077,2079,2081,2083,2085,2087,2089,2091,2093,2095,2097,2099,2101],{"class":135,"line":175},[133,2057,2058],{"class":212},"     ctx",[133,2060,484],{"class":139},[133,2062,685],{"class":294},[133,2064,298],{"class":143},[133,2066,690],{"class":212},[133,2068,304],{"class":139},[133,2070,254],{"class":253},[133,2072,304],{"class":139},[133,2074,254],{"class":253},[133,2076,304],{"class":139},[133,2078,1578],{"class":212},[133,2080,304],{"class":139},[133,2082,1583],{"class":212},[133,2084,304],{"class":139},[133,2086,254],{"class":253},[133,2088,304],{"class":139},[133,2090,254],{"class":253},[133,2092,304],{"class":139},[133,2094,1439],{"class":212},[133,2096,304],{"class":139},[133,2098,1444],{"class":212},[133,2100,499],{"class":143},[133,2102,257],{"class":139},[133,2104,2105],{"class":135,"line":201},[133,2106,752],{"class":139},[10,2108,2109,2110,2112],{},"This function just render image on canvas. When you set image object, canvas height and width at artguments, function use ",[130,2111,1034],{}," to render image.",[94,2114,2116],{"id":2115},"wavedrawingcut-image-by-wave-shape","waveDrawing():Cut image by wave shape",[10,2118,2119,2122],{},[130,2120,2121],{},"waveDrawing()","has process cutting image by wave shape.",[123,2124,2126],{"className":452,"code":2125,"language":454,"meta":128,"style":128},"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",[130,2127,2128,2160,2173,2192,2204,2224,2228,2263,2313,2338,2343,2347,2367,2387,2399,2403,2423,2435],{"__ignoreMap":128},[133,2129,2130,2132,2134,2136,2138,2140,2142,2144,2146,2148,2150,2152,2154,2156,2158],{"class":135,"line":136},[133,2131,461],{"class":147},[133,2133,1620],{"class":294},[133,2135,298],{"class":139},[133,2137,1458],{"class":1505},[133,2139,304],{"class":139},[133,2141,1439],{"class":1505},[133,2143,304],{"class":139},[133,2145,1444],{"class":1505},[133,2147,304],{"class":139},[133,2149,1637],{"class":1505},[133,2151,304],{"class":139},[133,2153,1642],{"class":1505},[133,2155,304],{"class":139},[133,2157,1647],{"class":1505},[133,2159,1517],{"class":139},[133,2161,2162,2165,2167,2169,2171],{"class":135,"line":154},[133,2163,2164],{"class":147},"      var",[133,2166,1657],{"class":212},[133,2168,478],{"class":139},[133,2170,1662],{"class":212},[133,2172,257],{"class":139},[133,2174,2175,2178,2180,2182,2184,2186,2188,2190],{"class":135,"line":164},[133,2176,2177],{"class":212},"      ctx",[133,2179,484],{"class":139},[133,2181,1674],{"class":212},[133,2183,478],{"class":139},[133,2185,1679],{"class":139},[133,2187,1682],{"class":193},[133,2189,190],{"class":139},[133,2191,257],{"class":139},[133,2193,2194,2196,2198,2200,2202],{"class":135,"line":175},[133,2195,2177],{"class":212},[133,2197,484],{"class":139},[133,2199,1696],{"class":294},[133,2201,577],{"class":143},[133,2203,257],{"class":139},[133,2205,2206,2208,2210,2212,2214,2216,2218,2220,2222],{"class":135,"line":201},[133,2207,2177],{"class":212},[133,2209,484],{"class":139},[133,2211,1710],{"class":294},[133,2213,298],{"class":143},[133,2215,254],{"class":253},[133,2217,304],{"class":139},[133,2219,1657],{"class":212},[133,2221,499],{"class":143},[133,2223,257],{"class":139},[133,2225,2226],{"class":135,"line":223},[133,2227,536],{"emptyLinePlaceholder":535},[133,2229,2230,2233,2235,2237,2239,2241,2243,2245,2247,2249,2251,2253,2255,2257,2259,2261],{"class":135,"line":233},[133,2231,2232],{"class":1733},"      for",[133,2234,548],{"class":143},[133,2236,765],{"class":147},[133,2238,1741],{"class":212},[133,2240,187],{"class":139},[133,2242,254],{"class":253},[133,2244,1748],{"class":139},[133,2246,1741],{"class":212},[133,2248,1753],{"class":139},[133,2250,1756],{"class":212},[133,2252,1748],{"class":139},[133,2254,1741],{"class":212},[133,2256,1763],{"class":139},[133,2258,1766],{"class":253},[133,2260,1769],{"class":143},[133,2262,240],{"class":139},[133,2264,2265,2268,2270,2272,2274,2276,2278,2280,2282,2284,2286,2288,2290,2292,2294,2296,2298,2300,2302,2304,2306,2308,2310],{"class":135,"line":243},[133,2266,2267],{"class":147},"           var",[133,2269,1780],{"class":212},[133,2271,478],{"class":139},[133,2273,1785],{"class":139},[133,2275,1642],{"class":212},[133,2277,1790],{"class":139},[133,2279,1793],{"class":212},[133,2281,484],{"class":139},[133,2283,1798],{"class":294},[133,2285,1801],{"class":143},[133,2287,1793],{"class":212},[133,2289,484],{"class":139},[133,2291,1808],{"class":212},[133,2293,652],{"class":139},[133,2295,1647],{"class":212},[133,2297,499],{"class":143},[133,2299,1790],{"class":139},[133,2301,298],{"class":143},[133,2303,1637],{"class":212},[133,2305,1823],{"class":139},[133,2307,1826],{"class":212},[133,2309,1829],{"class":143},[133,2311,2312],{"class":139},";;\n",[133,2314,2315,2318,2320,2322,2324,2326,2328,2330,2332,2334,2336],{"class":135,"line":260},[133,2316,2317],{"class":212},"           ctx",[133,2319,484],{"class":139},[133,2321,1841],{"class":294},[133,2323,298],{"class":143},[133,2325,1826],{"class":212},[133,2327,304],{"class":139},[133,2329,1780],{"class":212},[133,2331,1823],{"class":139},[133,2333,1854],{"class":212},[133,2335,499],{"class":143},[133,2337,257],{"class":139},[133,2339,2340],{"class":135,"line":272},[133,2341,2342],{"class":139},"      }\n",[133,2344,2345],{"class":135,"line":278},[133,2346,536],{"emptyLinePlaceholder":535},[133,2348,2349,2351,2353,2355,2357,2359,2361,2363,2365],{"class":135,"line":286},[133,2350,2177],{"class":212},[133,2352,484],{"class":139},[133,2354,1841],{"class":294},[133,2356,298],{"class":143},[133,2358,1439],{"class":212},[133,2360,304],{"class":139},[133,2362,1444],{"class":212},[133,2364,499],{"class":143},[133,2366,257],{"class":139},[133,2368,2369,2371,2373,2375,2377,2379,2381,2383,2385],{"class":135,"line":317},[133,2370,2177],{"class":212},[133,2372,484],{"class":139},[133,2374,1841],{"class":294},[133,2376,298],{"class":143},[133,2378,254],{"class":253},[133,2380,304],{"class":139},[133,2382,1444],{"class":212},[133,2384,499],{"class":143},[133,2386,257],{"class":139},[133,2388,2389,2391,2393,2395,2397],{"class":135,"line":322},[133,2390,2177],{"class":212},[133,2392,484],{"class":139},[133,2394,1920],{"class":294},[133,2396,577],{"class":143},[133,2398,257],{"class":139},[133,2400,2401],{"class":135,"line":332},[133,2402,536],{"emptyLinePlaceholder":535},[133,2404,2405,2407,2409,2411,2413,2415,2417,2419,2421],{"class":135,"line":342},[133,2406,2177],{"class":212},[133,2408,484],{"class":139},[133,2410,1940],{"class":212},[133,2412,478],{"class":139},[133,2414,1679],{"class":139},[133,2416,1947],{"class":193},[133,2418,190],{"class":139},[133,2420,1748],{"class":139},[133,2422,1955],{"class":1954},[133,2424,2425,2427,2429,2431,2433],{"class":135,"line":352},[133,2426,2177],{"class":212},[133,2428,484],{"class":139},[133,2430,1965],{"class":294},[133,2432,577],{"class":143},[133,2434,257],{"class":139},[133,2436,2437],{"class":135,"line":362},[133,2438,752],{"class":139},[10,2440,2441],{},"Each parameters mean",[37,2443,2444,2447,2450,2453,2456,2459],{},[40,2445,2446],{},"waveStartPoint：Start Y coordinate to write the wave.",[40,2448,2449],{},"canvasEndX：X coordinate of the canvas's right edge.（max canvas's X coordinate）",[40,2451,2452],{},"canvasEndY：Y coordinate of the canvas's bottom edge.（max canvas's Y coordinate）",[40,2454,2455],{},"deg：Init degree.",[40,2457,2458],{},"am：amplitude（This changes the wave's maxed height）",[40,2460,2461],{},"tp：period（This changes a wave's maxed width）",[10,2463,2464,2465,2467,2468,2470],{},"You don't have to think hard. More incresing ",[130,2466,1642],{}," higher wave. More increasing ",[130,2469,1647],{},",  gentle wave.",[10,2472,2473],{},"And ctx is the canvas instance you define above. It is global vars at this time.",[1051,2475,2477],{"id":2476},"define-the-position-to-draw-and-configure-superposition","Define the position to draw and Configure superposition",[123,2479,2481],{"className":452,"code":2480,"language":454,"meta":128,"style":128},"var waveStartY = waveStartPoint;\nctx.globalCompositeOperation = \"destination-out\";\nctx.beginPath();\nctx.moveTo(0, waveStartY);\n",[130,2482,2483,2496,2515,2527],{"__ignoreMap":128},[133,2484,2485,2487,2490,2492,2494],{"class":135,"line":136},[133,2486,765],{"class":147},[133,2488,2489],{"class":212}," waveStartY ",[133,2491,187],{"class":139},[133,2493,1662],{"class":212},[133,2495,257],{"class":139},[133,2497,2498,2500,2502,2505,2507,2509,2511,2513],{"class":135,"line":154},[133,2499,1171],{"class":212},[133,2501,484],{"class":139},[133,2503,2504],{"class":212},"globalCompositeOperation ",[133,2506,187],{"class":139},[133,2508,1679],{"class":139},[133,2510,1682],{"class":193},[133,2512,190],{"class":139},[133,2514,257],{"class":139},[133,2516,2517,2519,2521,2523,2525],{"class":135,"line":164},[133,2518,1171],{"class":212},[133,2520,484],{"class":139},[133,2522,1696],{"class":294},[133,2524,577],{"class":212},[133,2526,257],{"class":139},[133,2528,2529,2531,2533,2535,2537,2539,2541,2544],{"class":135,"line":175},[133,2530,1171],{"class":212},[133,2532,484],{"class":139},[133,2534,1710],{"class":294},[133,2536,298],{"class":212},[133,2538,254],{"class":253},[133,2540,304],{"class":139},[133,2542,2543],{"class":212}," waveStartY)",[133,2545,257],{"class":139},[10,2547,2548,2551,2552],{},[130,2549,2550],{},"ctx.globalCompositeOperation = \"destination-out\"; "," is very important to make the image transparent. ",[21,2553,2556],{"href":2554,"rel":2555},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FAPI\u002FCanvasRenderingContext2D\u002FglobalCompositeOperation",[25],"MDN",[10,2558,2559,2561],{},[130,2560,1674],{}," configure how the browser renders superposed shapes on the canvas. Remenber the below image.",[14,2563],{":src":72,":width":17},[10,2565,2566,2567,1021,2571,2574],{},"This process fills the image by transparent within the area surrounded by a red line. When that, ",[2568,2569,2570],"strong",{},"the already rendered image",[2568,2572,2573],{},"the wave shape filled transparent"," are superposed.",[10,2576,2577],{},"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",[1051,2579,2581],{"id":2580},"specify-cut-area","Specify cut area",[123,2583,2585],{"className":452,"code":2584,"language":454,"meta":128,"style":128}," 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",[130,2586,2587,2599,2617,2654,2702,2726,2731,2735,2753,2771],{"__ignoreMap":128},[133,2588,2589,2591,2593,2595,2597],{"class":135,"line":136},[133,2590,508],{"class":212},[133,2592,484],{"class":139},[133,2594,1696],{"class":294},[133,2596,577],{"class":212},[133,2598,257],{"class":139},[133,2600,2601,2603,2605,2607,2609,2611,2613,2615],{"class":135,"line":154},[133,2602,508],{"class":212},[133,2604,484],{"class":139},[133,2606,1710],{"class":294},[133,2608,298],{"class":212},[133,2610,254],{"class":253},[133,2612,304],{"class":139},[133,2614,2543],{"class":212},[133,2616,257],{"class":139},[133,2618,2619,2622,2624,2626,2628,2630,2632,2634,2637,2640,2642,2644,2646,2648,2650,2652],{"class":135,"line":164},[133,2620,2621],{"class":1733}," for",[133,2623,548],{"class":212},[133,2625,765],{"class":147},[133,2627,1741],{"class":212},[133,2629,187],{"class":139},[133,2631,254],{"class":253},[133,2633,1748],{"class":139},[133,2635,2636],{"class":212}," x ",[133,2638,2639],{"class":139},"\u003C=",[133,2641,1756],{"class":212},[133,2643,1748],{"class":139},[133,2645,1741],{"class":212},[133,2647,1763],{"class":139},[133,2649,1766],{"class":253},[133,2651,1769],{"class":212},[133,2653,240],{"class":139},[133,2655,2656,2658,2660,2662,2664,2666,2668,2670,2672,2674,2676,2678,2680,2682,2684,2686,2688,2690,2692,2694,2696,2698,2700],{"class":135,"line":175},[133,2657,2025],{"class":147},[133,2659,1780],{"class":212},[133,2661,478],{"class":139},[133,2663,1785],{"class":139},[133,2665,1642],{"class":212},[133,2667,1790],{"class":139},[133,2669,1793],{"class":212},[133,2671,484],{"class":139},[133,2673,1798],{"class":294},[133,2675,1801],{"class":143},[133,2677,1793],{"class":212},[133,2679,484],{"class":139},[133,2681,1808],{"class":212},[133,2683,652],{"class":139},[133,2685,1647],{"class":212},[133,2687,499],{"class":143},[133,2689,1790],{"class":139},[133,2691,298],{"class":143},[133,2693,1637],{"class":212},[133,2695,1823],{"class":139},[133,2697,1826],{"class":212},[133,2699,1829],{"class":143},[133,2701,2312],{"class":139},[133,2703,2704,2706,2708,2710,2712,2714,2716,2718,2720,2722,2724],{"class":135,"line":201},[133,2705,2058],{"class":212},[133,2707,484],{"class":139},[133,2709,1841],{"class":294},[133,2711,298],{"class":143},[133,2713,1826],{"class":212},[133,2715,304],{"class":139},[133,2717,1780],{"class":212},[133,2719,1823],{"class":139},[133,2721,1854],{"class":212},[133,2723,499],{"class":143},[133,2725,257],{"class":139},[133,2727,2728],{"class":135,"line":223},[133,2729,2730],{"class":139}," }\n",[133,2732,2733],{"class":135,"line":233},[133,2734,536],{"emptyLinePlaceholder":535},[133,2736,2737,2739,2741,2743,2746,2748,2751],{"class":135,"line":243},[133,2738,508],{"class":212},[133,2740,484],{"class":139},[133,2742,1841],{"class":294},[133,2744,2745],{"class":212},"(canvasEndX",[133,2747,304],{"class":139},[133,2749,2750],{"class":212},"canvasEndY)",[133,2752,257],{"class":139},[133,2754,2755,2757,2759,2761,2763,2765,2767,2769],{"class":135,"line":260},[133,2756,508],{"class":212},[133,2758,484],{"class":139},[133,2760,1841],{"class":294},[133,2762,298],{"class":212},[133,2764,254],{"class":253},[133,2766,304],{"class":139},[133,2768,2750],{"class":212},[133,2770,257],{"class":139},[133,2772,2773,2775,2777,2779,2781],{"class":135,"line":272},[133,2774,508],{"class":212},[133,2776,484],{"class":139},[133,2778,1920],{"class":294},[133,2780,577],{"class":212},[133,2782,257],{"class":139},[10,2784,2785],{},"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.",[10,2787,2788,2789,2793],{},"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 ",[2790,2791,2792],"em",{},"path"," of writing in one stroke and position on the code.",[1133,2795,2796,2802,2808,2814],{},[40,2797,2798,2801],{},[130,2799,2800],{},"ctx.beginPath()"," starts setting paths.",[40,2803,2804,2807],{},[130,2805,2806],{},"ctx.moveTo(X,Y)"," moves the path to specify coordinates.",[40,2809,2810,2813],{},[130,2811,2812],{},"ctx.lineTo(nextX,nextY)"," draw a line and move next coordinates.",[40,2815,2816,2819],{},[130,2817,2818],{},"ctx.closePath()"," declear to end setting path.",[10,2821,2822],{},"In this article case,",[1133,2824,2825,2834,2841,2844],{},[40,2826,2827,2828,2830,2831,2833],{},"Start setting paths from （0, waveStartY）. ",[130,2829,254],{}," is the left edge of the image (X = 0) and ",[130,2832,1854],{}," is a start point for the wave.",[40,2835,2836,2837,2840],{},"Using ",[130,2838,2839],{},"for"," and write the trigonometric function has x coordinates as sin argument, set paths and the paths.",[40,2842,2843],{},"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.",[40,2845,2846],{},"Close paths.",[1051,2848,2850],{"id":2849},"fill-the-selected-area-in-transparent","Fill the selected area in transparent",[10,2852,2853],{},"You just fill after you select the area by above method.",[123,2855,2857],{"className":452,"code":2856,"language":454,"meta":128,"style":128},"ctx.fillStyle = \"rgba(255,255,255,1)\"; \u002F\u002Fopacity 1\nctx.fill();\n",[130,2858,2859,2880],{"__ignoreMap":128},[133,2860,2861,2863,2865,2868,2870,2872,2874,2876,2878],{"class":135,"line":136},[133,2862,1171],{"class":212},[133,2864,484],{"class":139},[133,2866,2867],{"class":212},"fillStyle ",[133,2869,187],{"class":139},[133,2871,1679],{"class":139},[133,2873,1947],{"class":193},[133,2875,190],{"class":139},[133,2877,1748],{"class":139},[133,2879,1955],{"class":1954},[133,2881,2882,2884,2886,2888,2890],{"class":135,"line":154},[133,2883,1171],{"class":212},[133,2885,484],{"class":139},[133,2887,1965],{"class":294},[133,2889,577],{"class":212},[133,2891,257],{"class":139},[10,2893,2894,2896,2897,2900,2901,2904],{},[130,2895,1940],{}," configures the color to fill.  If you set ",[130,2898,2899],{},"globalCompositeOperation = \"destination-out\";`, there no problem to use any colors. ","fill()",[130,2902,2903],{},"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.",[10,2906,2907],{},"If you come here, you get the image that is cut with the wave.",[14,2909],{":src":16,":width":17},[29,2911,2913],{"id":2912},"implement-animation-by-the-loop","Implement animation by the loop.",[10,2915,2916,2917,1021,2920,2922],{},"Using defined functions ",[130,2918,2919],{},"imageSet()",[130,2921,2121],{},", set a loop fucntion.",[123,2924,2926],{"className":452,"code":2925,"language":454,"meta":128,"style":128},"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",[130,2927,2928,2937,2948,2969,3002,3018,3029],{"__ignoreMap":128},[133,2929,2930,2932,2935],{"class":135,"line":136},[133,2931,461],{"class":147},[133,2933,2934],{"class":294}," loop",[133,2936,467],{"class":139},[133,2938,2939,2942,2944,2946],{"class":135,"line":154},[133,2940,2941],{"class":294},"      setInterval",[133,2943,298],{"class":143},[133,2945,461],{"class":147},[133,2947,467],{"class":139},[133,2949,2950,2953,2955,2957,2959,2961,2963,2965,2967],{"class":135,"line":164},[133,2951,2952],{"class":294},"      imageSet",[133,2954,298],{"class":143},[133,2956,690],{"class":212},[133,2958,304],{"class":139},[133,2960,1439],{"class":212},[133,2962,304],{"class":139},[133,2964,1444],{"class":212},[133,2966,499],{"class":143},[133,2968,257],{"class":139},[133,2970,2971,2974,2976,2978,2980,2982,2984,2986,2988,2990,2992,2994,2996,2998,3000],{"class":135,"line":175},[133,2972,2973],{"class":294},"      waveDrawing",[133,2975,298],{"class":143},[133,2977,1458],{"class":212},[133,2979,304],{"class":139},[133,2981,1439],{"class":212},[133,2983,304],{"class":139},[133,2985,1444],{"class":212},[133,2987,304],{"class":139},[133,2989,1471],{"class":212},[133,2991,304],{"class":139},[133,2993,1476],{"class":212},[133,2995,304],{"class":139},[133,2997,1481],{"class":212},[133,2999,499],{"class":143},[133,3001,257],{"class":139},[133,3003,3004,3007,3010,3013,3015],{"class":135,"line":201},[133,3005,3006],{"class":212},"      degree",[133,3008,3009],{"class":139}," +=",[133,3011,3012],{"class":253}," 12",[133,3014,1748],{"class":139},[133,3016,3017],{"class":1954}," \u002F\u002F 12 is feeling.\n",[133,3019,3020,3023,3026],{"class":135,"line":223},[133,3021,3022],{"class":139},"    },",[133,3024,3025],{"class":253},"30",[133,3027,3028],{"class":143},")\n",[133,3030,3031],{"class":135,"line":233},[133,3032,752],{"class":139},[10,3034,3035,3036,3038,3039,3042],{},"The most important point is adding the number of angle with ",[130,3037,2121],{}," like ",[130,3040,3041],{},"degree +=4",".　Thus, the wave is animated. More increase degrees, more fast the wave. If you set over 50, it will be rough waves.",[10,3044,3045,3046,3048,3049,1275],{},"And ",[130,3047,1030],{}," fires the  ",[130,3050,3051],{},"loop()",[123,3053,3055],{"className":452,"code":3054,"language":454,"meta":128,"style":128},"image.onload = function(){\n    initDraw();\n    loop();\n}\n",[130,3056,3057,3071,3079,3088],{"__ignoreMap":128},[133,3058,3059,3061,3063,3065,3067,3069],{"class":135,"line":136},[133,3060,690],{"class":212},[133,3062,484],{"class":139},[133,3064,668],{"class":294},[133,3066,478],{"class":139},[133,3068,673],{"class":147},[133,3070,467],{"class":139},[133,3072,3073,3075,3077],{"class":135,"line":154},[133,3074,1299],{"class":294},[133,3076,577],{"class":143},[133,3078,257],{"class":139},[133,3080,3081,3084,3086],{"class":135,"line":164},[133,3082,3083],{"class":294},"    loop",[133,3085,577],{"class":143},[133,3087,257],{"class":139},[133,3089,3090],{"class":135,"line":175},[133,3091,752],{"class":139},[29,3093,3095],{"id":3094},"whole-code","Whole code",[10,3097,3098],{},"Whole code is theb below.",[123,3100,3102],{"className":452,"code":3101,"language":454,"meta":128,"style":128},"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",[130,3103,3104,3122,3130,3139,3143,3152,3178,3204,3208,3228,3244,3259,3263,3268,3293,3321,3335,3344,3353,3357,3362,3378,3394,3410,3414,3427,3441,3454,3458,3467,3488,3521,3526,3530,3538,3549,3570,3603,3614,3623,3627,3631,3652,3670,3687,3692,3713,3762,3767,3772,3805,3818,3837,3850,3871,3876,3912,3962,3988,3993,3998,4019,4040,4053,4058,4079,4092,4097,4102,4107],{"__ignoreMap":128},[133,3105,3106,3108,3110,3113,3115,3118,3120],{"class":135,"line":136},[133,3107,619],{"class":212},[133,3109,484],{"class":139},[133,3111,3112],{"class":212},"onload ",[133,3114,187],{"class":139},[133,3116,3117],{"class":294}," init",[133,3119,577],{"class":212},[133,3121,257],{"class":139},[133,3123,3124,3126,3128],{"class":135,"line":154},[133,3125,461],{"class":147},[133,3127,3117],{"class":294},[133,3129,467],{"class":139},[133,3131,3132,3135,3137],{"class":135,"line":164},[133,3133,3134],{"class":294},"    initAnimation",[133,3136,577],{"class":143},[133,3138,257],{"class":139},[133,3140,3141],{"class":135,"line":175},[133,3142,536],{"emptyLinePlaceholder":535},[133,3144,3145,3148,3150],{"class":135,"line":201},[133,3146,3147],{"class":147},"    function",[133,3149,464],{"class":294},[133,3151,467],{"class":139},[133,3153,3154,3156,3158,3160,3162,3164,3166,3168,3170,3172,3174,3176],{"class":135,"line":223},[133,3155,1777],{"class":147},[133,3157,475],{"class":212},[133,3159,478],{"class":139},[133,3161,481],{"class":212},[133,3163,484],{"class":139},[133,3165,487],{"class":294},[133,3167,298],{"class":143},[133,3169,492],{"class":139},[133,3171,368],{"class":193},[133,3173,492],{"class":139},[133,3175,499],{"class":143},[133,3177,257],{"class":139},[133,3179,3180,3182,3184,3186,3188,3190,3192,3194,3196,3198,3200,3202],{"class":135,"line":233},[133,3181,1777],{"class":147},[133,3183,508],{"class":212},[133,3185,478],{"class":139},[133,3187,475],{"class":212},[133,3189,484],{"class":139},[133,3191,517],{"class":294},[133,3193,298],{"class":143},[133,3195,492],{"class":139},[133,3197,524],{"class":193},[133,3199,492],{"class":139},[133,3201,499],{"class":143},[133,3203,257],{"class":139},[133,3205,3206],{"class":135,"line":243},[133,3207,536],{"emptyLinePlaceholder":535},[133,3209,3210,3212,3214,3216,3218,3220,3222,3224,3226],{"class":135,"line":260},[133,3211,1777],{"class":147},[133,3213,543],{"class":212},[133,3215,478],{"class":139},[133,3217,548],{"class":143},[133,3219,492],{"class":139},[133,3221,553],{"class":193},[133,3223,492],{"class":139},[133,3225,499],{"class":143},[133,3227,257],{"class":139},[133,3229,3230,3232,3234,3236,3238,3240,3242],{"class":135,"line":272},[133,3231,1777],{"class":147},[133,3233,566],{"class":212},[133,3235,478],{"class":139},[133,3237,571],{"class":139},[133,3239,574],{"class":294},[133,3241,577],{"class":143},[133,3243,257],{"class":139},[133,3245,3246,3249,3251,3253,3255,3257],{"class":135,"line":278},[133,3247,3248],{"class":212},"        image",[133,3250,484],{"class":139},[133,3252,589],{"class":212},[133,3254,478],{"class":139},[133,3256,543],{"class":212},[133,3258,257],{"class":139},[133,3260,3261],{"class":135,"line":286},[133,3262,536],{"emptyLinePlaceholder":535},[133,3264,3265],{"class":135,"line":317},[133,3266,3267],{"class":1954},"        \u002F\u002Fset canvas width and height\n",[133,3269,3270,3273,3275,3277,3279,3281,3283,3285,3287,3289,3291],{"class":135,"line":322},[133,3271,3272],{"class":212},"        canvas",[133,3274,484],{"class":139},[133,3276,609],{"class":212},[133,3278,478],{"class":139},[133,3280,614],{"class":294},[133,3282,298],{"class":143},[133,3284,619],{"class":212},[133,3286,484],{"class":139},[133,3288,624],{"class":212},[133,3290,499],{"class":143},[133,3292,257],{"class":139},[133,3294,3295,3297,3299,3301,3303,3305,3307,3309,3311,3313,3315,3317,3319],{"class":135,"line":332},[133,3296,3272],{"class":212},[133,3298,484],{"class":139},[133,3300,637],{"class":212},[133,3302,478],{"class":139},[133,3304,614],{"class":294},[133,3306,298],{"class":143},[133,3308,368],{"class":212},[133,3310,484],{"class":139},[133,3312,609],{"class":212},[133,3314,652],{"class":139},[133,3316,655],{"class":253},[133,3318,499],{"class":143},[133,3320,257],{"class":139},[133,3322,3323,3325,3327,3329,3331,3333],{"class":135,"line":342},[133,3324,3248],{"class":212},[133,3326,484],{"class":139},[133,3328,668],{"class":294},[133,3330,478],{"class":139},[133,3332,673],{"class":147},[133,3334,467],{"class":139},[133,3336,3337,3340,3342],{"class":135,"line":352},[133,3338,3339],{"class":294},"                initDraw",[133,3341,577],{"class":143},[133,3343,257],{"class":139},[133,3345,3346,3349,3351],{"class":135,"line":362},[133,3347,3348],{"class":294},"                loop",[133,3350,577],{"class":143},[133,3352,257],{"class":139},[133,3354,3355],{"class":135,"line":389},[133,3356,275],{"class":139},[133,3358,3359],{"class":135,"line":398},[133,3360,3361],{"class":143},"            \n",[133,3363,3364,3366,3368,3370,3372,3374,3376],{"class":135,"line":424},[133,3365,1777],{"class":147},[133,3367,1756],{"class":212},[133,3369,478],{"class":139},[133,3371,475],{"class":212},[133,3373,484],{"class":139},[133,3375,609],{"class":212},[133,3377,257],{"class":139},[133,3379,3380,3382,3384,3386,3388,3390,3392],{"class":135,"line":433},[133,3381,1777],{"class":147},[133,3383,1358],{"class":212},[133,3385,478],{"class":139},[133,3387,475],{"class":212},[133,3389,484],{"class":139},[133,3391,637],{"class":212},[133,3393,257],{"class":139},[133,3395,3396,3398,3400,3402,3404,3406,3408],{"class":135,"line":1610},[133,3397,1777],{"class":147},[133,3399,1662],{"class":212},[133,3401,478],{"class":139},[133,3403,1358],{"class":212},[133,3405,1361],{"class":139},[133,3407,1364],{"class":253},[133,3409,257],{"class":139},[133,3411,3412],{"class":135,"line":1615},[133,3413,536],{"emptyLinePlaceholder":535},[133,3415,3416,3418,3421,3423,3425],{"class":135,"line":1652},[133,3417,1777],{"class":147},[133,3419,3420],{"class":212}," amplitude",[133,3422,478],{"class":139},[133,3424,1382],{"class":253},[133,3426,257],{"class":139},[133,3428,3429,3431,3434,3436,3439],{"class":135,"line":1667},[133,3430,1777],{"class":147},[133,3432,3433],{"class":212}," period",[133,3435,478],{"class":139},[133,3437,3438],{"class":253}," 600",[133,3440,257],{"class":139},[133,3442,3443,3445,3448,3450,3452],{"class":135,"line":1689},[133,3444,1777],{"class":147},[133,3446,3447],{"class":212}," degree",[133,3449,478],{"class":139},[133,3451,1410],{"class":253},[133,3453,257],{"class":139},[133,3455,3456],{"class":135,"line":1703},[133,3457,536],{"emptyLinePlaceholder":535},[133,3459,3460,3463,3465],{"class":135,"line":1725},[133,3461,3462],{"class":147},"        function",[133,3464,1423],{"class":294},[133,3466,467],{"class":139},[133,3468,3469,3472,3474,3476,3478,3480,3482,3484,3486],{"class":135,"line":1730},[133,3470,3471],{"class":294},"            imageSet",[133,3473,298],{"class":143},[133,3475,690],{"class":212},[133,3477,304],{"class":139},[133,3479,1439],{"class":212},[133,3481,304],{"class":139},[133,3483,1444],{"class":212},[133,3485,499],{"class":143},[133,3487,257],{"class":139},[133,3489,3490,3493,3495,3497,3499,3501,3503,3505,3507,3509,3511,3513,3515,3517,3519],{"class":135,"line":1774},[133,3491,3492],{"class":294},"            waveDrawing",[133,3494,298],{"class":143},[133,3496,1458],{"class":212},[133,3498,304],{"class":139},[133,3500,1439],{"class":212},[133,3502,304],{"class":139},[133,3504,1444],{"class":212},[133,3506,304],{"class":139},[133,3508,1471],{"class":212},[133,3510,304],{"class":139},[133,3512,1476],{"class":212},[133,3514,304],{"class":139},[133,3516,1481],{"class":212},[133,3518,499],{"class":143},[133,3520,257],{"class":139},[133,3522,3523],{"class":135,"line":1834},[133,3524,3525],{"class":139},"        }\n",[133,3527,3528],{"class":135,"line":1861},[133,3529,536],{"emptyLinePlaceholder":535},[133,3531,3532,3534,3536],{"class":135,"line":1866},[133,3533,3462],{"class":147},[133,3535,2934],{"class":294},[133,3537,467],{"class":139},[133,3539,3540,3543,3545,3547],{"class":135,"line":1871},[133,3541,3542],{"class":294},"            setInterval",[133,3544,298],{"class":143},[133,3546,461],{"class":147},[133,3548,467],{"class":139},[133,3550,3551,3554,3556,3558,3560,3562,3564,3566,3568],{"class":135,"line":1892},[133,3552,3553],{"class":294},"                imageSet",[133,3555,298],{"class":143},[133,3557,690],{"class":212},[133,3559,304],{"class":139},[133,3561,1439],{"class":212},[133,3563,304],{"class":139},[133,3565,1444],{"class":212},[133,3567,499],{"class":143},[133,3569,257],{"class":139},[133,3571,3572,3575,3577,3579,3581,3583,3585,3587,3589,3591,3593,3595,3597,3599,3601],{"class":135,"line":1913},[133,3573,3574],{"class":294},"                waveDrawing",[133,3576,298],{"class":143},[133,3578,1458],{"class":212},[133,3580,304],{"class":139},[133,3582,1439],{"class":212},[133,3584,304],{"class":139},[133,3586,1444],{"class":212},[133,3588,304],{"class":139},[133,3590,1471],{"class":212},[133,3592,304],{"class":139},[133,3594,1476],{"class":212},[133,3596,304],{"class":139},[133,3598,1481],{"class":212},[133,3600,499],{"class":143},[133,3602,257],{"class":139},[133,3604,3605,3608,3610,3612],{"class":135,"line":1927},[133,3606,3607],{"class":212},"                degree",[133,3609,3009],{"class":139},[133,3611,3012],{"class":253},[133,3613,257],{"class":139},[133,3615,3616,3619,3621],{"class":135,"line":1932},[133,3617,3618],{"class":139},"            },",[133,3620,3025],{"class":253},[133,3622,3028],{"class":143},[133,3624,3625],{"class":135,"line":1958},[133,3626,3525],{"class":139},[133,3628,3629],{"class":135,"line":1972},[133,3630,536],{"emptyLinePlaceholder":535},[133,3632,3634,3636,3638,3640,3642,3644,3646,3648,3650],{"class":135,"line":3633},42,[133,3635,3462],{"class":147},[133,3637,1500],{"class":294},[133,3639,298],{"class":139},[133,3641,1506],{"class":1505},[133,3643,304],{"class":139},[133,3645,1439],{"class":1505},[133,3647,304],{"class":139},[133,3649,1444],{"class":1505},[133,3651,1517],{"class":139},[133,3653,3655,3658,3660,3662,3664,3666,3668],{"class":135,"line":3654},43,[133,3656,3657],{"class":147},"            var",[133,3659,1524],{"class":212},[133,3661,478],{"class":139},[133,3663,1529],{"class":212},[133,3665,484],{"class":139},[133,3667,609],{"class":212},[133,3669,257],{"class":139},[133,3671,3673,3675,3677,3679,3681,3683,3685],{"class":135,"line":3672},44,[133,3674,3657],{"class":147},[133,3676,1542],{"class":212},[133,3678,478],{"class":139},[133,3680,1529],{"class":212},[133,3682,484],{"class":139},[133,3684,637],{"class":212},[133,3686,257],{"class":139},[133,3688,3690],{"class":135,"line":3689},45,[133,3691,536],{"emptyLinePlaceholder":535},[133,3693,3695,3698,3700,3702,3704,3706,3709,3711],{"class":135,"line":3694},46,[133,3696,3697],{"class":212},"            ctx",[133,3699,484],{"class":139},[133,3701,1674],{"class":212},[133,3703,478],{"class":139},[133,3705,1679],{"class":139},[133,3707,3708],{"class":193},"destination-over",[133,3710,190],{"class":139},[133,3712,257],{"class":139},[133,3714,3716,3718,3720,3722,3724,3726,3728,3730,3732,3734,3736,3738,3740,3742,3744,3746,3748,3750,3752,3754,3756,3758,3760],{"class":135,"line":3715},47,[133,3717,3697],{"class":212},[133,3719,484],{"class":139},[133,3721,685],{"class":294},[133,3723,298],{"class":143},[133,3725,690],{"class":212},[133,3727,304],{"class":139},[133,3729,254],{"class":253},[133,3731,304],{"class":139},[133,3733,254],{"class":253},[133,3735,304],{"class":139},[133,3737,1578],{"class":212},[133,3739,304],{"class":139},[133,3741,1583],{"class":212},[133,3743,304],{"class":139},[133,3745,254],{"class":253},[133,3747,304],{"class":139},[133,3749,254],{"class":253},[133,3751,304],{"class":139},[133,3753,1439],{"class":212},[133,3755,304],{"class":139},[133,3757,1444],{"class":212},[133,3759,499],{"class":143},[133,3761,257],{"class":139},[133,3763,3765],{"class":135,"line":3764},48,[133,3766,3525],{"class":139},[133,3768,3770],{"class":135,"line":3769},49,[133,3771,536],{"emptyLinePlaceholder":535},[133,3773,3775,3777,3779,3781,3783,3785,3787,3789,3791,3793,3795,3797,3799,3801,3803],{"class":135,"line":3774},50,[133,3776,3462],{"class":147},[133,3778,1620],{"class":294},[133,3780,298],{"class":139},[133,3782,1458],{"class":1505},[133,3784,304],{"class":139},[133,3786,1439],{"class":1505},[133,3788,304],{"class":139},[133,3790,1444],{"class":1505},[133,3792,304],{"class":139},[133,3794,1637],{"class":1505},[133,3796,304],{"class":139},[133,3798,1642],{"class":1505},[133,3800,304],{"class":139},[133,3802,1647],{"class":1505},[133,3804,1517],{"class":139},[133,3806,3808,3810,3812,3814,3816],{"class":135,"line":3807},51,[133,3809,3657],{"class":147},[133,3811,1657],{"class":212},[133,3813,478],{"class":139},[133,3815,1662],{"class":212},[133,3817,257],{"class":139},[133,3819,3821,3823,3825,3827,3829,3831,3833,3835],{"class":135,"line":3820},52,[133,3822,3697],{"class":212},[133,3824,484],{"class":139},[133,3826,1674],{"class":212},[133,3828,478],{"class":139},[133,3830,1679],{"class":139},[133,3832,1682],{"class":193},[133,3834,190],{"class":139},[133,3836,257],{"class":139},[133,3838,3840,3842,3844,3846,3848],{"class":135,"line":3839},53,[133,3841,3697],{"class":212},[133,3843,484],{"class":139},[133,3845,1696],{"class":294},[133,3847,577],{"class":143},[133,3849,257],{"class":139},[133,3851,3853,3855,3857,3859,3861,3863,3865,3867,3869],{"class":135,"line":3852},54,[133,3854,3697],{"class":212},[133,3856,484],{"class":139},[133,3858,1710],{"class":294},[133,3860,298],{"class":143},[133,3862,254],{"class":253},[133,3864,304],{"class":139},[133,3866,1657],{"class":212},[133,3868,499],{"class":143},[133,3870,257],{"class":139},[133,3872,3874],{"class":135,"line":3873},55,[133,3875,536],{"emptyLinePlaceholder":535},[133,3877,3879,3882,3884,3886,3888,3890,3892,3894,3896,3898,3900,3902,3904,3906,3908,3910],{"class":135,"line":3878},56,[133,3880,3881],{"class":1733},"            for",[133,3883,548],{"class":143},[133,3885,765],{"class":147},[133,3887,1741],{"class":212},[133,3889,187],{"class":139},[133,3891,254],{"class":253},[133,3893,1748],{"class":139},[133,3895,1741],{"class":212},[133,3897,1753],{"class":139},[133,3899,1756],{"class":212},[133,3901,1748],{"class":139},[133,3903,1741],{"class":212},[133,3905,1763],{"class":139},[133,3907,1766],{"class":253},[133,3909,1769],{"class":143},[133,3911,240],{"class":139},[133,3913,3915,3918,3920,3922,3924,3926,3928,3930,3932,3934,3936,3938,3940,3942,3944,3946,3948,3950,3952,3954,3956,3958,3960],{"class":135,"line":3914},57,[133,3916,3917],{"class":147},"                var",[133,3919,1780],{"class":212},[133,3921,478],{"class":139},[133,3923,1785],{"class":139},[133,3925,1642],{"class":212},[133,3927,1790],{"class":139},[133,3929,1793],{"class":212},[133,3931,484],{"class":139},[133,3933,1798],{"class":294},[133,3935,1801],{"class":143},[133,3937,1793],{"class":212},[133,3939,484],{"class":139},[133,3941,1808],{"class":212},[133,3943,652],{"class":139},[133,3945,1647],{"class":212},[133,3947,499],{"class":143},[133,3949,1790],{"class":139},[133,3951,298],{"class":143},[133,3953,1637],{"class":212},[133,3955,1823],{"class":139},[133,3957,1826],{"class":212},[133,3959,1829],{"class":143},[133,3961,257],{"class":139},[133,3963,3965,3968,3970,3972,3974,3976,3978,3980,3982,3984,3986],{"class":135,"line":3964},58,[133,3966,3967],{"class":212},"                ctx",[133,3969,484],{"class":139},[133,3971,1841],{"class":294},[133,3973,298],{"class":143},[133,3975,1826],{"class":212},[133,3977,304],{"class":139},[133,3979,1780],{"class":212},[133,3981,1823],{"class":139},[133,3983,1854],{"class":212},[133,3985,499],{"class":143},[133,3987,257],{"class":139},[133,3989,3991],{"class":135,"line":3990},59,[133,3992,275],{"class":139},[133,3994,3996],{"class":135,"line":3995},60,[133,3997,536],{"emptyLinePlaceholder":535},[133,3999,4001,4003,4005,4007,4009,4011,4013,4015,4017],{"class":135,"line":4000},61,[133,4002,3697],{"class":212},[133,4004,484],{"class":139},[133,4006,1841],{"class":294},[133,4008,298],{"class":143},[133,4010,1439],{"class":212},[133,4012,304],{"class":139},[133,4014,1444],{"class":212},[133,4016,499],{"class":143},[133,4018,257],{"class":139},[133,4020,4022,4024,4026,4028,4030,4032,4034,4036,4038],{"class":135,"line":4021},62,[133,4023,3697],{"class":212},[133,4025,484],{"class":139},[133,4027,1841],{"class":294},[133,4029,298],{"class":143},[133,4031,254],{"class":253},[133,4033,304],{"class":139},[133,4035,1444],{"class":212},[133,4037,499],{"class":143},[133,4039,257],{"class":139},[133,4041,4043,4045,4047,4049,4051],{"class":135,"line":4042},63,[133,4044,3697],{"class":212},[133,4046,484],{"class":139},[133,4048,1920],{"class":294},[133,4050,577],{"class":143},[133,4052,257],{"class":139},[133,4054,4056],{"class":135,"line":4055},64,[133,4057,536],{"emptyLinePlaceholder":535},[133,4059,4061,4063,4065,4067,4069,4071,4073,4075,4077],{"class":135,"line":4060},65,[133,4062,3697],{"class":212},[133,4064,484],{"class":139},[133,4066,1940],{"class":212},[133,4068,478],{"class":139},[133,4070,1679],{"class":139},[133,4072,1947],{"class":193},[133,4074,190],{"class":139},[133,4076,1748],{"class":139},[133,4078,1955],{"class":1954},[133,4080,4082,4084,4086,4088,4090],{"class":135,"line":4081},66,[133,4083,3697],{"class":212},[133,4085,484],{"class":139},[133,4087,1965],{"class":294},[133,4089,577],{"class":143},[133,4091,257],{"class":139},[133,4093,4095],{"class":135,"line":4094},67,[133,4096,3525],{"class":139},[133,4098,4100],{"class":135,"line":4099},68,[133,4101,536],{"emptyLinePlaceholder":535},[133,4103,4105],{"class":135,"line":4104},69,[133,4106,747],{"class":139},[133,4108,4110],{"class":135,"line":4109},70,[133,4111,752],{"class":139},[29,4113,4115],{"id":4114},"if-you-change-the-wave","If you change the wave",[10,4117,4118],{},"In this case,",[123,4120,4122],{"className":452,"code":4121,"language":454,"meta":128,"style":128},"var amplitude = 30;\nvar period = 600;\n\nfunction loop(){\n      ...\n      degree += 12;\n      },30)\n}\n",[130,4123,4124,4136,4148,4152,4160,4165,4175,4184],{"__ignoreMap":128},[133,4125,4126,4128,4130,4132,4134],{"class":135,"line":136},[133,4127,765],{"class":147},[133,4129,1377],{"class":212},[133,4131,187],{"class":139},[133,4133,1382],{"class":253},[133,4135,257],{"class":139},[133,4137,4138,4140,4142,4144,4146],{"class":135,"line":154},[133,4139,765],{"class":147},[133,4141,1391],{"class":212},[133,4143,187],{"class":139},[133,4145,3438],{"class":253},[133,4147,257],{"class":139},[133,4149,4150],{"class":135,"line":164},[133,4151,536],{"emptyLinePlaceholder":535},[133,4153,4154,4156,4158],{"class":135,"line":175},[133,4155,461],{"class":147},[133,4157,2934],{"class":294},[133,4159,467],{"class":139},[133,4161,4162],{"class":135,"line":201},[133,4163,4164],{"class":139},"      ...\n",[133,4166,4167,4169,4171,4173],{"class":135,"line":223},[133,4168,3006],{"class":212},[133,4170,3009],{"class":139},[133,4172,3012],{"class":253},[133,4174,257],{"class":139},[133,4176,4177,4180,4182],{"class":135,"line":233},[133,4178,4179],{"class":139},"      },",[133,4181,3025],{"class":253},[133,4183,3028],{"class":212},[133,4185,4186],{"class":135,"line":243},[133,4187,752],{"class":212},[10,4189,4190,4192,4193,4195,4196,4199,4200,4202],{},[130,4191,1476],{}," defines the wave's height and ",[130,4194,1481],{}," is the width of the wave and ",[130,4197,4198],{},"degree +="," is velocity. On the other, by changing the trigonometric function you configured in ",[130,4201,2121],{},", you can render",[29,4204,4206],{"id":4205},"at-last","At last",[10,4208,4209],{},"That is all how to make the image waved. Canvas element can render complex animation like this.",[228,4211,4212],{},"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":128,"searchDepth":164,"depth":164,"links":4214},[4215,4216,4219,4224,4232,4233,4234,4235],{"id":31,"depth":154,"text":32},{"id":51,"depth":154,"text":52,"children":4217},[4218],{"id":96,"depth":164,"text":97},{"id":103,"depth":154,"text":104,"children":4220},[4221],{"id":445,"depth":164,"text":446,"children":4222},[4223],{"id":1053,"depth":175,"text":1054},{"id":1268,"depth":154,"text":1269,"children":4225},[4226,4227],{"id":1994,"depth":164,"text":1995},{"id":2115,"depth":164,"text":2116,"children":4228},[4229,4230,4231],{"id":2476,"depth":175,"text":2477},{"id":2580,"depth":175,"text":2581},{"id":2849,"depth":175,"text":2850},{"id":2912,"depth":154,"text":2913},{"id":3094,"depth":154,"text":3095},{"id":4114,"depth":154,"text":4115},{"id":4205,"depth":154,"text":4206},[4237],"devstack",null,"md",{},"\u002Fen\u002Farticles\u002Fjs-canvas-wave",{"title":5,"description":5},"en\u002Farticles\u002Fjs-canvas-wave",[4245],"js","_mix\u002Fex01-768x299.png","XGsTAH2MWGO4JY7zi0vCtHnyPK984EuGs39M-dI4HT4",1780987138858]