Skip to content

Instantly share code, notes, and snippets.

@wareya
Created May 30, 2018 02:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wareya/704b662e16d340f7921fa67df89fcbf9 to your computer and use it in GitHub Desktop.
Save wareya/704b662e16d340f7921fa67df89fcbf9 to your computer and use it in GitHub Desktop.
complex canvas bezier drawing example
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="436" height="436" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
// from kanjivg, see kanjivg's license
let junk = [["jump", [[[13.74, 14.86], [14.5, 15.5], [14.74, 17.71], [14.73, 18.76]]], [[[14.73, 18.76], [14.68, 28.5], [14.45, 58.33], [13.75, 61.25]]]], ["jump", [[[14.98, 16.63], [18.0, 16.5], [34.17, 14.48], [36.54, 14.1]]], [[[36.54, 14.1], [37.48, 13.95], [39.07, 13.83], [39.54, 14.07]]]], ["jump", [[[27.31, 16.54], [27.56, 16.95], [28.27, 17.49], [28.26, 18.14]]], [[[28.26, 18.14], [28.24, 24.79], [28.2, 48.26], [28.01, 58.71]]]], ["jump", [[[14.66, 32.38], [20.92, 31.75], [32.91, 29.66], [35.6, 29.23]]], [[[35.6, 29.23], [36.54, 29.08], [38.13, 28.97], [38.6, 29.2]]]], ["jump", [[[14.76, 45.92], [21.02, 45.29], [33.01, 43.66], [35.7, 43.24]]], [[[35.7, 43.24], [36.64, 43.09], [38.23, 42.98], [38.7, 43.21]]]], ["jump", [[[14.49, 61.6], [20.66, 60.08], [33.99, 57.48], [37.42, 57.11]]], [[[37.42, 57.11], [40.75, 56.75], [42.24, 57.64], [41.87, 61.56]]], [[[41.87, 61.56], [40.75, 73.5], [38.0, 86.25], [32.25, 94.3]]], [[[32.25, 94.3], [28.31, 99.81], [25.93, 94.74], [25.04, 93.37]]]], ["jump", [[[10.21, 72.27], [10.61, 77.61], [8.4, 82.31], [7.98, 83.37]]]], ["jump", [[[16.09, 70.91], [17.69, 73.42], [19.04, 76.59], [19.41, 81.07]]]], ["jump", [[[23.62, 68.59], [24.41, 69.7], [27.22, 73.35], [27.57, 76.97]]]], ["jump", [[[30.27, 64.64], [31.67, 66.81], [33.98, 69.04], [34.49, 71.91]]]], ["jump", [[[46.96, 13.89], [47.68, 14.27], [49.0, 14.32], [49.73, 14.27]]], [[[49.73, 14.27], [53.88, 14.0], [60.76, 12.5], [65.05, 12.39]]], [[[65.05, 12.39], [66.26, 12.36], [66.98, 12.57], [67.58, 12.76]]]], ["jump", [[[48.28, 21.17], [48.74, 22.23], [49.2, 22.76], [49.2, 24.17]]], [[[49.2, 24.17], [49.2, 25.58], [49.05, 37.85], [49.2, 39.26]]]], ["jump", [[[49.21, 22.77], [50.48, 22.67], [63.3, 20.36], [64.46, 20.24]]], [[[64.46, 20.24], [65.42, 20.14], [66.04, 21.34], [65.97, 21.92]]], [[[65.97, 21.92], [65.82, 23.11], [65.67, 36.61], [65.67, 37.21]]]], ["jump", [[[55.0, 27.25], [56.53, 28.37], [58.96, 31.85], [59.34, 33.59]]]], ["jump", [[[72.95, 12.39], [73.67, 12.77], [74.99, 12.82], [75.72, 12.77]]], [[[75.72, 12.77], [79.87, 12.5], [87.08, 10.94], [91.54, 11.39]]], [[[91.54, 11.39], [92.74, 11.51], [93.47, 11.57], [94.07, 11.76]]]], ["jump", [[[74.54, 19.92], [74.96, 21.02], [75.37, 21.57], [75.37, 23.05]]], [[[75.37, 23.05], [75.37, 24.52], [75.23, 35.78], [75.37, 37.26]]]], ["jump", [[[75.56, 21.27], [76.83, 21.17], [89.81, 18.86], [90.96, 18.74]]], [[[90.96, 18.74], [91.92, 18.64], [92.54, 19.84], [92.47, 20.42]]], [[[92.47, 20.42], [92.32, 21.61], [92.17, 35.61], [92.17, 36.21]]]], ["jump", [[[81.0, 26.5], [82.53, 27.58], [84.96, 30.92], [85.34, 32.59]]]], ["jump", [[[68.77, 39.13], [69.3, 39.4], [70.43, 41.15], [70.54, 41.69]]], [[[70.54, 41.69], [70.65, 42.23], [70.59, 43.75], [70.49, 47.12]]]], ["jump", [[[47.92, 48.53], [49.16, 48.97], [51.43, 49.04], [52.67, 48.97]]], [[[52.67, 48.97], [65.57, 48.23], [80.86, 46.38], [92.26, 45.53]]], [[[92.26, 45.53], [94.32, 45.38], [95.57, 45.74], [96.6, 45.96]]]], ["jump", [[[50.99, 49.24], [51.02, 50.35], [51.06, 52.11], [50.93, 53.71]]], [[[50.93, 53.71], [50.17, 63.13], [48.47, 85.98], [40.31, 96.13]]]], ["jump", [[[53.83, 57.83], [55.24, 58.27], [56.43, 58.56], [57.89, 58.39]]], [[[57.89, 58.39], [67.96, 57.17], [83.52, 55.94], [86.35, 55.75]]], [[[86.35, 55.75], [88.46, 55.61], [89.22, 56.43], [88.83, 58.01]]], [[[88.83, 58.01], [88.12, 60.91], [87.68, 62.67], [86.73, 65.79]]]], ["jump", [[[62.73, 52.65], [63.35, 52.94], [63.72, 54.46], [63.84, 55.04]]], [[[63.84, 55.04], [63.96, 55.62], [64.31, 64.22], [64.67, 68.24]]]], ["jump", [[[76.52, 50.46], [77.14, 50.75], [77.67, 52.25], [77.63, 52.85]]], [[[77.63, 52.85], [77.47, 55.45], [76.92, 62.5], [76.39, 66.53]]]], ["jump", [[[53.85, 68.57], [54.51, 68.84], [55.72, 68.91], [56.38, 68.84]]], [[[56.38, 68.84], [60.59, 68.38], [83.41, 66.17], [88.13, 66.27]]], [[[88.13, 66.27], [89.23, 66.29], [89.89, 66.4], [90.44, 66.53]]]], ["jump", [[[57.2, 81.0], [60.7, 80.79], [65.73, 80.07], [68.78, 79.73]]], [[[68.78, 79.73], [69.67, 79.63], [70.24, 79.63], [70.7, 79.69]]]], ["jump", [[[55.17, 73.39], [55.8, 73.76], [56.34, 74.85], [56.34, 75.35]]], [[[56.34, 75.35], [56.34, 76.72], [56.14, 93.35], [56.14, 95.08]]], [[[56.14, 95.08], [56.14, 97.0], [57.42, 96.72], [58.67, 96.11]]], [[[58.67, 96.11], [61.95, 94.53], [64.25, 92.75], [68.2, 90.25]]]], ["jump", [[[91.98, 72.98], [92.12, 73.36], [91.63, 75.19], [91.1, 75.65]]], [[[91.1, 75.65], [89.0, 77.5], [81.62, 82.39], [77.27, 84.44]]]], ["jump", [[[75.51, 70.95], [76.14, 71.34], [76.38, 72.18], [76.38, 73.17]]], [[[76.38, 73.17], [76.38, 74.48], [76.33, 89.63], [76.31, 91.17]]], [[[76.31, 91.17], [76.24, 96.76], [78.49, 97.84], [86.03, 97.84]]], [[[86.03, 97.84], [93.07, 97.84], [96.03, 94.26], [96.03, 89.44]]]]];
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d")
ctx.lineWidth = 3;
ctx.lineCap="round";
ctx.globalCompositeOperation = "darken";
ctx.transform(4, 0, 0, 4, 0, 0);
for (let stroke of junk)
{
for (let myevent of stroke)
{
if (myevent == "jump")
continue
for (let bezier of myevent)
{
console.log(bezier);
ctx.beginPath();
ctx.moveTo(bezier[0][0], bezier[0][1]);
ctx.bezierCurveTo(bezier[1][0], bezier[1][1], bezier[2][0], bezier[2][1], bezier[3][0], bezier[3][1]);
ctx.stroke();
}
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment