问:
How to zoom the path inside canvas?
I have drawn a path using html5 canvas and javascript. I want to zoom that path. The black colored map should be 100% of the view box. When I mention any view box size, the map should be adjusted to 100% as svgs. Please check the below plunker

Check this plunker

// Global variables
var canvas;
var ctx;
// This function is called when the page loads.
function init() {

    // Initialize canvas and get context.
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");

    // Draw on the context.
    draw(ctx);
}

function draw(ctx) {

    // Draw on the canvas.
    // Get the drawing coordinates.
    ctx.save();
    ctx.translate(0, 0);
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(23.03, 0);
    ctx.lineTo(23.03, 22.464);
    ctx.lineTo(0, 22.464);
    ctx.closePath();
    ctx.clip();
    ctx.translate(0, 0);
    ctx.translate(0, 0);
    ctx.scale(1, 1);
    ctx.translate(0, 0);
    ctx.strokeStyle = 'rgba(0,0,0,0)';
    ctx.lineCap = 'butt';
    ctx.lineJoin = 'miter';
    ctx.miterLimit = 4;
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(14.708, 2.174);
    ctx.bezierCurveTo(14.518, 2.2119999999999997, 14.328, 2.25, 14.138, 2.288);
    ctx.bezierCurveTo(14.138, 2.3259999999999996, 14.138, 2.364, 14.138, 2.4019999999999997);
    ctx.bezierCurveTo(14.1, 2.4019999999999997, 14.062, 2.4019999999999997, 14.024, 2.4019999999999997);
    ctx.bezierCurveTo(14.024, 2.5919999999999996, 14.024, 2.7819999999999996, 14.024, 2.9719999999999995);
    ctx.bezierCurveTo(14.276, 3.1989999999999994, 14.299, 3.5759999999999996, 14.594, 3.7699999999999996);
    ctx.bezierCurveTo(14.724, 3.8999999999999995, 14.594, 3.8149999999999995, 14.822, 3.8839999999999995);
    ctx.bezierCurveTo(14.889999999999999, 4.1419999999999995, 14.918999999999999, 4.164999999999999, 15.049999999999999, 4.34);
    ctx.bezierCurveTo(15.088, 4.34, 15.126, 4.34, 15.164, 4.34);
    ctx.bezierCurveTo(15.164, 4.4159999999999995, 15.164, 4.492, 15.164, 4.568);
    ctx.bezierCurveTo(15.202, 4.568, 15.24, 4.568, 15.278, 4.568);
    ctx.bezierCurveTo(15.316, 5.024, 15.354000000000001, 5.4799999999999995, 15.392000000000001, 5.936);
    ctx.bezierCurveTo(15.354000000000001, 5.936, 15.316, 5.936, 15.278, 5.936);
    ctx.bezierCurveTo(15.24, 6.088, 15.202, 6.24, 15.164, 6.392);
    ctx.bezierCurveTo(15.126, 6.392, 15.088, 6.392, 15.049999999999999, 6.392);
    ctx.bezierCurveTo(14.995, 6.641, 15.351999999999999, 7.0760000000000005, 15.392, 7.19);
    ctx.bezierCurveTo(15.392, 7.3420000000000005, 15.392, 7.494000000000001, 15.392, 7.646000000000001);
    ctx.bezierCurveTo(15.164, 7.722, 14.936, 7.798000000000001, 14.708, 7.8740000000000006);
    ctx.bezierCurveTo(14.898, 8.33, 15.088000000000001, 8.786000000000001, 15.278, 9.242);
    ctx.bezierCurveTo(15.784, 9.008000000000001, 15.92, 9.010000000000002, 16.532, 9.128);
    ctx.bezierCurveTo(16.532, 9.242, 16.532, 9.356, 16.532, 9.47);
    ctx.bezierCurveTo(16.709, 9.571000000000002, 16.771, 9.637, 16.874, 9.812000000000001);
    ctx.bezierCurveTo(17.003, 9.716000000000001, 16.891, 9.826, 16.988, 9.698);
    ctx.bezierCurveTo(17.126, 9.625, 17.152, 9.512, 17.216, 9.47);
    ctx.bezierCurveTo(17.292, 9.47, 17.368000000000002, 9.47, 17.444000000000003, 9.47);
    ctx.bezierCurveTo(17.444000000000003, 9.432, 17.444000000000003, 9.394, 17.444000000000003, 9.356);
    ctx.bezierCurveTo(17.520000000000003, 9.356, 17.596000000000004, 9.356, 17.672000000000004, 9.356);
    ctx.bezierCurveTo(17.710000000000004, 9.28, 17.748000000000005, 9.204, 17.786000000000005, 9.128);
    ctx.bezierCurveTo(17.938000000000006, 9.09, 18.090000000000003, 9.052, 18.242000000000004, 9.014);
    ctx.bezierCurveTo(18.280000000000005, 8.937999999999999, 18.318000000000005, 8.862, 18.356000000000005, 8.786);
    ctx.bezierCurveTo(18.432000000000006, 8.786, 18.508000000000006, 8.786, 18.584000000000007, 8.786);
    ctx.bezierCurveTo(18.546000000000006, 8.709999999999999, 18.508000000000006, 8.634, 18.470000000000006, 8.558);
    ctx.bezierCurveTo(18.584000000000007, 8.52, 18.698000000000008, 8.482, 18.812000000000005, 8.443999999999999);
    ctx.bezierCurveTo(18.812000000000005, 8.405999999999999, 18.812000000000005, 8.367999999999999, 18.812000000000005, 8.329999999999998);
    ctx.bezierCurveTo(18.926000000000005, 8.253999999999998, 19.040000000000006, 8.177999999999999, 19.154000000000003, 8.101999999999999);
    ctx.bezierCurveTo(19.154000000000003, 8.025999999999998, 19.154000000000003, 7.949999999999998, 19.154000000000003, 7.873999999999999);
    ctx.bezierCurveTo(19.268000000000004, 7.797999999999999, 19.382000000000005, 7.721999999999999, 19.496000000000002, 7.645999999999999);
    ctx.bezierCurveTo(19.458000000000002, 7.569999999999999, 19.42, 7.493999999999999, 19.382, 7.417999999999999);
    ctx.bezierCurveTo(19.458000000000002, 7.417999999999999, 19.534000000000002, 7.417999999999999, 19.610000000000003, 7.417999999999999);
    ctx.bezierCurveTo(19.610000000000003, 7.379999999999999, 19.610000000000003, 7.342, 19.610000000000003, 7.303999999999999);
    ctx.bezierCurveTo(19.844000000000005, 7.108999999999999, 19.962000000000003, 7.093999999999999, 20.408, 7.076);
    ctx.bezierCurveTo(20.332, 7.494, 20.256, 7.912, 20.18, 8.328999999999999);
    ctx.bezierCurveTo(20.368, 8.480999999999998, 20.472, 8.722999999999999, 20.636, 8.899);
    ctx.bezierCurveTo(20.712, 8.937, 20.788, 8.975, 20.864, 9.013);
    ctx.bezierCurveTo(20.864, 9.089, 20.864, 9.165, 20.864, 9.241);
    ctx.bezierCurveTo(20.94, 9.279, 21.016000000000002, 9.317, 21.092000000000002, 9.355);
    ctx.bezierCurveTo(21.092000000000002, 9.659, 21.092000000000002, 9.963000000000001, 21.092000000000002, 10.267000000000001);
    ctx.bezierCurveTo(21.130000000000003, 10.267000000000001, 21.168000000000003, 10.267000000000001, 21.206000000000003, 10.267000000000001);
    ctx.bezierCurveTo(21.244000000000003, 10.381000000000002, 21.282000000000004, 10.495000000000001, 21.320000000000004, 10.609000000000002);
    ctx.bezierCurveTo(21.396000000000004, 10.609000000000002, 21.472000000000005, 10.609000000000002, 21.548000000000005, 10.609000000000002);
    ctx.bezierCurveTo(21.510000000000005, 10.685000000000002, 21.472000000000005, 10.761000000000001, 21.434000000000005, 10.837000000000002);
    ctx.bezierCurveTo(21.586000000000006, 10.875000000000002, 21.738000000000003, 10.913000000000002, 21.890000000000004, 10.951000000000002);
    ctx.bezierCurveTo(21.928000000000004, 11.027000000000003, 21.966000000000005, 11.103000000000002, 22.004000000000005, 11.179000000000002);
    ctx.bezierCurveTo(22.080000000000005, 11.179000000000002, 22.156000000000006, 11.179000000000002, 22.232000000000006, 11.179000000000002);
    ctx.bezierCurveTo(22.270000000000007, 11.255000000000003, 22.308000000000007, 11.331000000000001, 22.346000000000007, 11.407000000000002);
    ctx.bezierCurveTo(22.498000000000008, 11.521000000000003, 22.650000000000006, 11.635000000000002, 22.802000000000007, 11.749000000000002);
    ctx.bezierCurveTo(22.802000000000007, 11.825000000000003, 22.802000000000007, 11.901000000000002, 22.802000000000007, 11.977000000000002);
    ctx.bezierCurveTo(22.878000000000007, 12.015000000000002, 22.954000000000008, 12.053000000000003, 23.03000000000001, 12.091000000000003);
    ctx.bezierCurveTo(23.03000000000001, 12.205000000000004, 23.03000000000001, 12.319000000000003, 23.03000000000001, 12.433000000000003);
    ctx.bezierCurveTo(21.83300000000001, 12.409000000000004, 21.232000000000006, 12.605000000000004, 20.40800000000001, 12.889000000000003);
    ctx.bezierCurveTo(20.256000000000007, 12.889000000000003, 20.10400000000001, 12.889000000000003, 19.95200000000001, 12.889000000000003);
    ctx.bezierCurveTo(19.95200000000001, 12.927000000000003, 19.95200000000001, 12.965000000000003, 19.95200000000001, 13.003000000000004);
    ctx.bezierCurveTo(19.800000000000008, 13.041000000000004, 19.64800000000001, 13.079000000000004, 19.49600000000001, 13.117000000000004);
    ctx.bezierCurveTo(19.49600000000001, 13.193000000000005, 19.49600000000001, 13.269000000000004, 19.49600000000001, 13.345000000000004);
    ctx.bezierCurveTo(19.42000000000001, 13.307000000000004, 19.34400000000001, 13.269000000000004, 19.268000000000008, 13.231000000000003);
    ctx.bezierCurveTo(19.268000000000008, 13.269000000000004, 19.268000000000008, 13.307000000000004, 19.268000000000008, 13.345000000000004);
    ctx.bezierCurveTo(19.230000000000008, 13.345000000000004, 19.192000000000007, 13.345000000000004, 19.154000000000007, 13.345000000000004);
    ctx.bezierCurveTo(19.154000000000007, 13.421000000000005, 19.154000000000007, 13.497000000000003, 19.154000000000007, 13.573000000000004);
    ctx.bezierCurveTo(19.116000000000007, 13.573000000000004, 19.078000000000007, 13.573000000000004, 19.040000000000006, 13.573000000000004);
    ctx.bezierCurveTo(19.040000000000006, 13.535000000000004, 19.040000000000006, 13.497000000000003, 19.040000000000006, 13.459000000000003);
    ctx.bezierCurveTo(18.851000000000006, 13.359000000000004, 18.942000000000007, 13.614000000000003, 18.926000000000005, 13.687000000000003);
    ctx.bezierCurveTo(18.611000000000004, 13.770000000000003, 18.671000000000006, 13.719000000000003, 18.584000000000007, 14.029000000000003);
    ctx.bezierCurveTo(18.546000000000006, 14.029000000000003, 18.508000000000006, 14.029000000000003, 18.470000000000006, 14.029000000000003);
    ctx.bezierCurveTo(18.508000000000006, 14.105000000000004, 18.546000000000006, 14.181000000000003, 18.584000000000007, 14.257000000000003);
    ctx.bezierCurveTo(18.508000000000006, 14.257000000000003, 18.432000000000006, 14.257000000000003, 18.356000000000005, 14.257000000000003);
    ctx.bezierCurveTo(18.344000000000005, 14.418000000000003, 18.335000000000004, 14.296000000000003, 18.470000000000006, 14.371000000000004);
    ctx.bezierCurveTo(18.341000000000005, 14.500000000000004, 18.471000000000007, 14.419000000000004, 18.242000000000004, 14.485000000000005);
    ctx.bezierCurveTo(18.204000000000004, 14.675000000000004, 18.166000000000004, 14.865000000000006, 18.128000000000004, 15.055000000000005);
    ctx.bezierCurveTo(18.090000000000003, 15.055000000000005, 18.052000000000003, 15.055000000000005, 18.014000000000003, 15.055000000000005);
    ctx.bezierCurveTo(18.014000000000003, 15.359000000000005, 18.014000000000003, 15.663000000000006, 18.014000000000003, 15.967000000000006);
    ctx.bezierCurveTo(17.976000000000003, 15.967000000000006, 17.938000000000002, 15.967000000000006, 17.900000000000002, 15.967000000000006);
    ctx.bezierCurveTo(17.862000000000002, 16.119000000000007, 17.824, 16.271000000000004, 17.786, 16.423000000000005);
    ctx.bezierCurveTo(17.748, 16.423000000000005, 17.71, 16.423000000000005, 17.672, 16.423000000000005);
    ctx.bezierCurveTo(17.71, 16.499000000000006, 17.748, 16.575000000000006, 17.786, 16.651000000000007);
    ctx.bezierCurveTo(17.672, 16.689000000000007, 17.558, 16.727000000000007, 17.444000000000003, 16.765000000000008);
    ctx.bezierCurveTo(17.406000000000002, 16.95500000000001, 17.368000000000002, 17.145000000000007, 17.330000000000002, 17.335000000000008);
    ctx.bezierCurveTo(17.254, 17.373000000000008, 17.178, 17.41100000000001, 17.102, 17.44900000000001);
    ctx.bezierCurveTo(17.102, 17.48700000000001, 17.102, 17.52500000000001, 17.102, 17.56300000000001);
    ctx.bezierCurveTo(17.14, 17.56300000000001, 17.178, 17.56300000000001, 17.216, 17.56300000000001);
    ctx.bezierCurveTo(17.397000000000002, 17.70900000000001, 16.991, 17.67600000000001, 16.988, 17.67700000000001);
    ctx.bezierCurveTo(16.988, 17.943000000000012, 16.988, 18.20900000000001, 16.988, 18.47500000000001);
    ctx.bezierCurveTo(16.553, 18.66400000000001, 15.911, 19.17300000000001, 15.847999999999999, 19.72900000000001);
    ctx.bezierCurveTo(15.771999999999998, 19.72900000000001, 15.696, 19.72900000000001, 15.62, 19.72900000000001);
    ctx.bezierCurveTo(15.475999999999999, 19.98900000000001, 14.79, 20.38500000000001, 15.049999999999999, 20.64100000000001);
    ctx.bezierCurveTo(14.973999999999998, 20.64100000000001, 14.898, 20.64100000000001, 14.822, 20.64100000000001);
    ctx.bezierCurveTo(14.822, 20.90700000000001, 14.822, 21.17300000000001, 14.822, 21.439000000000007);
    ctx.bezierCurveTo(14.86, 21.439000000000007, 14.898, 21.439000000000007, 14.936, 21.439000000000007);
    ctx.bezierCurveTo(14.936, 21.515000000000008, 14.936, 21.591000000000008, 14.936, 21.66700000000001);
    ctx.bezierCurveTo(14.974, 21.66700000000001, 15.012, 21.66700000000001, 15.05, 21.66700000000001);
    ctx.bezierCurveTo(15.05, 21.70500000000001, 15.05, 21.74300000000001, 15.05, 21.78100000000001);
    ctx.bezierCurveTo(15.012, 21.78100000000001, 14.974, 21.78100000000001, 14.936, 21.78100000000001);
    ctx.bezierCurveTo(14.822, 21.922000000000008, 14.692, 21.899000000000008, 14.594, 22.00900000000001);
    ctx.bezierCurveTo(14.594, 22.08500000000001, 14.594, 22.161000000000012, 14.594, 22.237000000000013);
    ctx.bezierCurveTo(14.517999999999999, 22.199000000000012, 14.442, 22.161000000000012, 14.366, 22.12300000000001);
    ctx.bezierCurveTo(14.328, 22.237000000000013, 14.29, 22.351000000000013, 14.251999999999999, 22.46500000000001);
    ctx.bezierCurveTo(14.206, 22.49600000000001, 13.994, 22.29700000000001, 13.796, 22.35100000000001);
    ctx.bezierCurveTo(13.796, 22.38900000000001, 13.796, 22.42700000000001, 13.796, 22.46500000000001);
    ctx.bezierCurveTo(13.34, 22.46500000000001, 12.883999999999999, 22.46500000000001, 12.427999999999999, 22.46500000000001);
    ctx.bezierCurveTo(12.422999999999998, 21.91000000000001, 12.568, 21.35400000000001, 12.77, 20.98300000000001);
    ctx.bezierCurveTo(12.808, 20.98300000000001, 12.846, 20.98300000000001, 12.884, 20.98300000000001);
    ctx.bezierCurveTo(12.884, 20.90700000000001, 12.884, 20.83100000000001, 12.884, 20.75500000000001);
    ctx.bezierCurveTo(12.96, 20.71700000000001, 13.036, 20.67900000000001, 13.112, 20.64100000000001);
    ctx.bezierCurveTo(13.233, 20.44400000000001, 13.32, 19.90400000000001, 13.226, 19.84300000000001);
    ctx.bezierCurveTo(13.302000000000001, 19.84300000000001, 13.378, 19.84300000000001, 13.454, 19.84300000000001);
    ctx.bezierCurveTo(13.476, 19.14000000000001, 13.577, 18.68600000000001, 13.454, 18.02000000000001);
    ctx.bezierCurveTo(13.378, 18.02000000000001, 13.302000000000001, 18.02000000000001, 13.226, 18.02000000000001);
    ctx.bezierCurveTo(13.104000000000001, 17.91500000000001, 13.340000000000002, 17.90600000000001, 13.340000000000002, 17.90600000000001);
    ctx.bezierCurveTo(13.340000000000002, 17.86800000000001, 13.340000000000002, 17.83000000000001, 13.340000000000002, 17.79200000000001);
    ctx.bezierCurveTo(13.117, 17.38900000000001, 13.420000000000002, 16.60700000000001, 13.226, 16.19600000000001);
    ctx.bezierCurveTo(13.112, 16.120000000000008, 12.998000000000001, 16.044000000000008, 12.884, 15.968000000000009);
    ctx.bezierCurveTo(12.597, 15.530000000000008, 12.32, 14.62400000000001, 12.314, 13.917000000000009);
    ctx.bezierCurveTo(12.238, 13.955000000000009, 12.162, 13.99300000000001, 12.086, 14.03100000000001);
    ctx.bezierCurveTo(12.086, 13.955000000000009, 12.086, 13.87900000000001, 12.086, 13.80300000000001);
    ctx.bezierCurveTo(11.82, 13.61300000000001, 11.554, 13.423000000000009, 11.288, 13.23300000000001);
    ctx.bezierCurveTo(11.288, 13.157000000000009, 11.288, 13.08100000000001, 11.288, 13.00500000000001);
    ctx.bezierCurveTo(11.212, 12.96700000000001, 11.136000000000001, 12.92900000000001, 11.06, 12.891000000000009);
    ctx.bezierCurveTo(11.06, 12.815000000000008, 11.06, 12.73900000000001, 11.06, 12.66300000000001);
    ctx.bezierCurveTo(11.022, 12.66300000000001, 10.984, 12.66300000000001, 10.946, 12.66300000000001);
    ctx.bezierCurveTo(10.87, 12.43500000000001, 10.794, 12.20700000000001, 10.718, 11.97900000000001);
    ctx.bezierCurveTo(10.68, 11.97900000000001, 10.642, 11.97900000000001, 10.604, 11.97900000000001);
    ctx.bezierCurveTo(10.604, 11.865000000000009, 10.604, 11.75100000000001, 10.604, 11.63700000000001);
    ctx.bezierCurveTo(10.489999999999998, 11.599000000000009, 10.376, 11.561000000000009, 10.261999999999999, 11.523000000000009);
    ctx.bezierCurveTo(10.299999999999999, 11.447000000000008, 10.338, 11.37100000000001, 10.376, 11.295000000000009);
    ctx.bezierCurveTo(10.299999999999999, 11.257000000000009, 10.224, 11.219000000000008, 10.148, 11.181000000000008);
    ctx.bezierCurveTo(10.148, 11.105000000000008, 10.148, 11.029000000000009, 10.148, 10.953000000000008);
    ctx.bezierCurveTo(10.11, 10.953000000000008, 10.072, 10.953000000000008, 10.033999999999999, 10.953000000000008);
    ctx.bezierCurveTo(9.749999999999998, 10.619000000000009, 9.267999999999999, 10.154000000000009, 8.78, 10.041000000000007);
    ctx.bezierCurveTo(8.78, 9.965000000000007, 8.78, 9.889000000000008, 8.78, 9.813000000000008);
    ctx.bezierCurveTo(8.665, 9.772, 8.551, 9.734, 8.437, 9.696);
    ctx.bezierCurveTo(8.437, 9.658, 8.437, 9.62, 8.437, 9.581999999999999);
    ctx.bezierCurveTo(8.277, 9.459999999999999, 7.997999999999999, 9.29, 7.866999999999999, 9.467999999999998);
    ctx.bezierCurveTo(7.866999999999999, 9.391999999999998, 7.866999999999999, 9.315999999999999, 7.866999999999999, 9.239999999999998);
    ctx.bezierCurveTo(7.411, 9.164, 6.955, 9.088, 6.499, 9.012);
    ctx.bezierCurveTo(6.499, 8.974, 6.499, 8.936, 6.499, 8.898);
    ctx.bezierCurveTo(6.271, 8.822, 6.042, 8.746, 5.814, 8.67);
    ctx.bezierCurveTo(5.814, 8.632, 5.814, 8.594, 5.814, 8.556);
    ctx.bezierCurveTo(5.207, 8.594, 4.599, 8.632, 3.99, 8.67);
    ctx.bezierCurveTo(3.99, 8.632, 3.99, 8.594, 3.99, 8.556);
    ctx.bezierCurveTo(3.602, 8.441, 3.248, 8.621, 2.964, 8.442);
    ctx.bezierCurveTo(2.888, 8.328, 2.813, 8.214, 2.736, 8.101);
    ctx.bezierCurveTo(2.66, 8.138, 2.584, 8.176, 2.508, 8.214);
    ctx.bezierCurveTo(2.508, 8.1, 2.508, 7.986000000000001, 2.508, 7.872000000000001);
    ctx.bezierCurveTo(2.356, 7.834, 2.204, 7.796, 2.052, 7.758);
    ctx.bezierCurveTo(2.014, 7.645, 1.976, 7.53, 1.938, 7.417);
    ctx.bezierCurveTo(1.976, 7.417, 2.014, 7.417, 2.052, 7.417);
    ctx.bezierCurveTo(2.052, 7.075, 2.052, 6.733, 2.052, 6.391);
    ctx.bezierCurveTo(2.0140000000000002, 6.391, 1.976, 6.391, 1.938, 6.391);
    ctx.bezierCurveTo(1.938, 6.315, 1.938, 6.239, 1.938, 6.163);
    ctx.bezierCurveTo(1.9, 6.163, 1.8619999999999999, 6.163, 1.8239999999999998, 6.163);
    ctx.bezierCurveTo(1.8239999999999998, 5.897, 1.8239999999999998, 5.631, 1.8239999999999998, 5.365);
    ctx.bezierCurveTo(1.513, 5.185, 1.545, 5.053, 1.026, 5.023);
    ctx.bezierCurveTo(1.026, 5.061, 1.026, 5.098999999999999, 1.026, 5.137);
    ctx.bezierCurveTo(0.95, 5.175, 0.874, 5.213, 0.798, 5.251);
    ctx.bezierCurveTo(0.798, 5.175000000000001, 0.798, 5.099, 0.798, 5.023000000000001);
    ctx.bezierCurveTo(0.569, 4.958, 0.7, 5.037, 0.57, 4.909);
    ctx.bezierCurveTo(0.608, 4.909, 0.6459999999999999, 4.909, 0.6839999999999999, 4.909);
    ctx.bezierCurveTo(0.6839999999999999, 4.795, 0.6839999999999999, 4.681, 0.6839999999999999, 4.567);
    ctx.bezierCurveTo(0.49399999999999994, 4.567, 0.30399999999999994, 4.567, 0.11399999999999999, 4.567);
    ctx.bezierCurveTo(0.076, 4.453, 0.038, 4.339, 0, 4.226);
    ctx.bezierCurveTo(0.038, 4.226, 0.076, 4.226, 0.114, 4.226);
    ctx.bezierCurveTo(0.114, 4.074, 0.114, 3.922, 0.114, 3.77);
    ctx.bezierCurveTo(0.228, 3.732, 0.342, 3.694, 0.456, 3.656);
    ctx.bezierCurveTo(0.67, 3.484, 0.76, 3.218, 0.798, 2.858);
    ctx.bezierCurveTo(0.988, 2.858, 1.178, 2.858, 1.3679999999999999, 2.858);
    ctx.bezierCurveTo(1.3679999999999999, 2.782, 1.3679999999999999, 2.706, 1.3679999999999999, 2.63);
    ctx.bezierCurveTo(1.482, 2.63, 1.5959999999999999, 2.63, 1.71, 2.63);
    ctx.bezierCurveTo(1.71, 2.554, 1.71, 2.4779999999999998, 1.71, 2.4019999999999997);
    ctx.bezierCurveTo(1.8679999999999999, 2.4309999999999996, 1.697, 2.417, 1.824, 2.5159999999999996);
    ctx.bezierCurveTo(1.976, 2.44, 2.128, 2.364, 2.28, 2.288);
    ctx.bezierCurveTo(2.28, 2.25, 2.28, 2.2119999999999997, 2.28, 2.174);
    ctx.bezierCurveTo(2.356, 2.174, 2.432, 2.174, 2.508, 2.174);
    ctx.bezierCurveTo(2.573, 1.896, 2.628, 1.923, 2.736, 1.718);
    ctx.bezierCurveTo(2.888, 1.832, 3.041, 1.946, 3.192, 2.06);
    ctx.bezierCurveTo(3.192, 2.098, 3.192, 2.136, 3.192, 2.174);
    ctx.bezierCurveTo(3.269, 2.136, 3.344, 2.098, 3.42, 2.06);
    ctx.bezierCurveTo(3.42, 2.136, 3.42, 2.212, 3.42, 2.2880000000000003);
    ctx.bezierCurveTo(3.551, 2.42, 3.728, 2.389, 3.99, 2.402);
    ctx.bezierCurveTo(3.99, 2.326, 3.99, 2.25, 3.99, 2.174);
    ctx.bezierCurveTo(4.12, 2.27, 4.007, 2.159, 4.104, 2.288);
    ctx.bezierCurveTo(4.5200000000000005, 2.694, 4.5520000000000005, 3.5309999999999997, 4.674, 4.226);
    ctx.bezierCurveTo(4.788, 4.264, 4.902, 4.302, 5.016, 4.34);
    ctx.bezierCurveTo(5.055, 4.453, 5.092, 4.567, 5.13, 4.681);
    ctx.bezierCurveTo(5.244, 4.643, 5.358, 4.605, 5.4719999999999995, 4.567);
    ctx.bezierCurveTo(5.481, 4.867, 5.515999999999999, 4.955, 5.585999999999999, 5.1370000000000005);
    ctx.bezierCurveTo(5.8149999999999995, 5.072, 5.909, 5.0520000000000005, 6.042, 4.909000000000001);
    ctx.bezierCurveTo(6.042, 4.833000000000001, 6.042, 4.757000000000001, 6.042, 4.681000000000001);
    ctx.bezierCurveTo(6.08, 4.681000000000001, 6.117999999999999, 4.681000000000001, 6.156, 4.681000000000001);
    ctx.bezierCurveTo(6.156, 4.719000000000001, 6.156, 4.757000000000001, 6.156, 4.795000000000001);
    ctx.bezierCurveTo(6.231999999999999, 4.757000000000001, 6.308, 4.719000000000001, 6.3839999999999995, 4.681000000000001);
    ctx.bezierCurveTo(6.3839999999999995, 4.719000000000001, 6.3839999999999995, 4.757000000000001, 6.3839999999999995, 4.795000000000001);
    ctx.bezierCurveTo(6.5089999999999995, 4.897000000000001, 6.4079999999999995, 4.775000000000001, 6.497999999999999, 4.909000000000001);
    ctx.bezierCurveTo(6.459999999999999, 4.909000000000001, 6.422, 4.909000000000001, 6.3839999999999995, 4.909000000000001);
    ctx.bezierCurveTo(6.273, 5.098, 6.549, 5.005, 6.613, 5.023);
    ctx.lineTo(6.727, 4.909);
    ctx.bezierCurveTo(6.765000000000001, 5.099, 6.803, 5.289, 6.841, 5.479);
    ctx.bezierCurveTo(6.955, 5.517, 7.069, 5.555, 7.183, 5.593);
    ctx.bezierCurveTo(7.183, 5.631, 7.183, 5.669, 7.183, 5.707);
    ctx.bezierCurveTo(7.322, 5.818, 7.404, 5.787, 7.5249999999999995, 5.935);
    ctx.bezierCurveTo(7.866999999999999, 5.973, 8.209, 6.010999999999999, 8.551, 6.0489999999999995);
    ctx.bezierCurveTo(8.589, 5.935, 8.627, 5.821, 8.665000000000001, 5.707);
    ctx.bezierCurveTo(8.936, 5.684, 8.947, 5.66, 9.121, 5.593);
    ctx.bezierCurveTo(9.011000000000001, 5.447, 8.871, 5.475, 8.779, 5.365);
    ctx.bezierCurveTo(8.779, 5.289000000000001, 8.779, 5.213, 8.779, 5.1370000000000005);
    ctx.bezierCurveTo(8.665, 5.099, 8.551, 5.061, 8.437, 5.023);
    ctx.bezierCurveTo(8.442, 4.58, 8.474, 4.454, 8.665, 4.226);
    ctx.bezierCurveTo(8.741, 4.188, 8.816999999999998, 4.15, 8.892999999999999, 4.112);
    ctx.bezierCurveTo(8.855, 3.998, 8.817, 3.883, 8.779, 3.77);
    ctx.bezierCurveTo(8.779, 3.77, 8.967, 3.622, 9.007, 3.542);
    ctx.bezierCurveTo(8.663, 3.463, 8.258, 2.789, 7.981, 3.085);
    ctx.bezierCurveTo(7.981, 3.009, 7.981, 2.933, 7.981, 2.8569999999999998);
    ctx.bezierCurveTo(7.796, 2.98, 7.92, 3.051, 7.867, 3.085);
    ctx.bezierCurveTo(7.795, 3.131, 7.627, 2.877, 7.411, 2.971);
    ctx.bezierCurveTo(7.335, 3.085, 7.259, 3.2, 7.183, 3.313);
    ctx.bezierCurveTo(7.02, 3.367, 7.021, 3.121, 6.955, 3.085);
    ctx.bezierCurveTo(6.8790000000000004, 3.085, 6.803, 3.085, 6.727, 3.085);
    ctx.bezierCurveTo(6.727, 3.047, 6.727, 3.009, 6.727, 2.971);
    ctx.bezierCurveTo(6.362, 2.781, 6.006, 2.7560000000000002, 5.473000000000001, 2.743);
    ctx.bezierCurveTo(5.473000000000001, 2.667, 5.473000000000001, 2.5909999999999997, 5.473000000000001, 2.5149999999999997);
    ctx.bezierCurveTo(5.549, 2.5149999999999997, 5.625000000000001, 2.5149999999999997, 5.7010000000000005, 2.5149999999999997);
    ctx.bezierCurveTo(5.793, 2.1479999999999997, 5.993, 2.1099999999999994, 6.157000000000001, 1.8309999999999995);
    ctx.bezierCurveTo(6.081000000000001, 1.8309999999999995, 6.005000000000001, 1.8309999999999995, 5.929000000000001, 1.8309999999999995);
    ctx.bezierCurveTo(5.883000000000001, 1.3729999999999996, 5.7970000000000015, 1.4189999999999996, 5.929000000000001, 1.0329999999999995);
    ctx.bezierCurveTo(6.004, 1.072, 6.081, 1.11, 6.157, 1.148);
    ctx.bezierCurveTo(6.195, 1.262, 6.232, 1.376, 6.271, 1.49);
    ctx.bezierCurveTo(6.3469999999999995, 1.49, 6.423, 1.49, 6.499, 1.49);
    ctx.bezierCurveTo(6.46, 1.566, 6.423, 1.642, 6.385, 1.718);
    ctx.bezierCurveTo(6.423, 1.718, 6.460999999999999, 1.718, 6.499, 1.718);
    ctx.bezierCurveTo(6.632, 1.873, 6.707, 1.892, 6.955, 1.946);
    ctx.bezierCurveTo(6.955, 1.8319999999999999, 6.955, 1.718, 6.955, 1.6039999999999999);
    ctx.bezierCurveTo(7.107, 1.6039999999999999, 7.259, 1.6039999999999999, 7.4110000000000005, 1.6039999999999999);
    ctx.bezierCurveTo(7.373, 1.49, 7.335, 1.376, 7.297, 1.262);
    ctx.bezierCurveTo(7.373, 1.3, 7.449, 1.338, 7.525, 1.376);
    ctx.bezierCurveTo(7.525, 1.3379999999999999, 7.525, 1.2999999999999998, 7.525, 1.2619999999999998);
    ctx.bezierCurveTo(7.563000000000001, 1.2619999999999998, 7.601, 1.2619999999999998, 7.639, 1.2619999999999998);
    ctx.bezierCurveTo(7.601, 1.0719999999999998, 7.563000000000001, 0.8819999999999998, 7.525, 0.6919999999999998);
    ctx.bezierCurveTo(7.563000000000001, 0.6919999999999998, 7.601, 0.6919999999999998, 7.639, 0.6919999999999998);
    ctx.bezierCurveTo(7.769, 0.5619999999999998, 7.639, 0.6469999999999998, 7.867, 0.5779999999999998);
    ctx.bezierCurveTo(7.867, 0.5019999999999999, 7.867, 0.4259999999999998, 7.867, 0.34999999999999987);
    ctx.bezierCurveTo(8.358, 0.48099999999999987, 8.256, 0.32099999999999984, 8.665, 0.12199999999999986);
    ctx.bezierCurveTo(8.665, 0.08399999999999985, 8.665, 0.04599999999999986, 8.665, 0.007999999999999854);
    ctx.bezierCurveTo(8.827, -0.04900000000000015, 8.828999999999999, 0.21099999999999985, 8.892999999999999, 0.23599999999999988);
    ctx.bezierCurveTo(9.26, 0.383, 9.427, 0.259, 9.691, 0.351);
    ctx.bezierCurveTo(9.833, 0.7629999999999999, 9.678, 0.997, 9.805000000000001, 1.376);
    ctx.bezierCurveTo(10.909000000000002, 0.9259999999999999, 11.771, 1.458, 12.769000000000002, 1.718);
    ctx.bezierCurveTo(12.906000000000002, 1.4689999999999999, 13.020000000000001, 1.343, 13.339000000000002, 1.262);
    ctx.bezierCurveTo(13.339000000000002, 1.3, 13.339000000000002, 1.338, 13.339000000000002, 1.3760000000000001);
    ctx.bezierCurveTo(13.491000000000001, 1.3760000000000001, 13.643000000000002, 1.3760000000000001, 13.795000000000002, 1.3760000000000001);
    ctx.bezierCurveTo(13.795000000000002, 1.4140000000000001, 13.795000000000002, 1.4520000000000002, 13.795000000000002, 1.4900000000000002);
    ctx.bezierCurveTo(14.232, 1.7, 14.57, 1.656, 14.708, 2.174);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    ctx.restore();
    ctx.restore();
}

function paintLake() {

    // If the shape is clicked, display a fact
    // and paint the lake.
    // Display a fact.
    alert("Lake Michigan is one of the five Great Lakes of America.");

    // Fill the lake with blue.
    ctx.fillStyle = "blue";
    ctx.fill();
    ctx.scale(200, 200);
}

function makeLake() {

    // These methods draw the shape of the lake.

}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><body onload="init()">
 <h1>
  Lake Michigan
 </h1>
 <canvas id="canvas" width="25" height="25" onclick="paintLake()">
 </canvas>
 <p>
    Click on the lake to learn a fact about Lake Michigan.
 </p>
</body></code>```

Title: How to zoom the path inside canvas?

Body:
I have drawn a path using html5 canvas and javascript. I want to zoom that path. The black colored map should be 100% of the view box. When I mention any view box size, the map should be adjusted to 100% as svgs. Please check the below plunker

Check this plunker

// Global variables
var canvas;
var ctx;
// This function is called when the page loads.
function init() {

    // Initialize canvas and get context.
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");

    // Draw on the context.
    draw(ctx);
}

function draw(ctx) {

    // Draw on the canvas.
    // Get the drawing coordinates.
    ctx.save();
    ctx.translate(0, 0);
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(23.03, 0);
    ctx.lineTo(23.03, 22.464);
    ctx.lineTo(0, 22.464);
    ctx.closePath();
    ctx.clip();
    ctx.translate(0, 0);
    ctx.translate(0, 0);
    ctx.scale(1, 1);
    ctx.translate(0, 0);
    ctx.strokeStyle = 'rgba(0,0,0,0)';
    ctx.lineCap = 'butt';
    ctx.lineJoin = 'miter';
    ctx.miterLimit = 4;
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(14.708, 2.174);
    ctx.bezierCurveTo(14.518, 2.2119999999999997, 14.328, 2.25, 14.138, 2.288);
    ctx.bezierCurveTo(14.138, 2.3259999999999996, 14.138, 2.364, 14.138, 2.4019999999999997);
    ctx.bezierCurveTo(14.1, 2.4019999999999997, 14.062, 2.4019999999999997, 14.024, 2.4019999999999997);
    ctx.bezierCurveTo(14.024, 2.5919999999999996, 14.024, 2.7819999999999996, 14.024, 2.9719999999999995);
    ctx.bezierCurveTo(14.276, 3.1989999999999994, 14.299, 3.5759999999999996, 14.594, 3.7699999999999996);
    ctx.bezierCurveTo(14.724, 3.8999999999999995, 14.594, 3.8149999999999995, 14.822, 3.8839999999999995);
    ctx.bezierCurveTo(14.889999999999999, 4.1419999999999995, 14.918999999999999, 4.164999999999999, 15.049999999999999, 4.34);
    ctx.bezierCurveTo(15.088, 4.34, 15.126, 4.34, 15.164, 4.34);
    ctx.bezierCurveTo(15.164, 4.4159999999999995, 15.164, 4.492, 15.164, 4.568);
    ctx.bezierCurveTo(15.202, 4.568, 15.24, 4.568, 15.278, 4.568);
    ctx.bezierCurveTo(15.316, 5.024, 15.354000000000001, 5.4799999999999995, 15.392000000000001, 5.936);
    ctx.bezierCurveTo(15.354000000000001, 5.936, 15.316, 5.936, 15.278, 5.936);
    ctx.bezierCurveTo(15.24, 6.088, 15.202, 6.24, 15.164, 6.392);
    ctx.bezierCurveTo(15.126, 6.392, 15.088, 6.392, 15.049999999999999, 6.392);
    ctx.bezierCurveTo(14.995, 6.641, 15.351999999999999, 7.0760000000000005, 15.392, 7.19);
    ctx.bezierCurveTo(15.392, 7.3420000000000005, 15.392, 7.494000000000001, 15.392, 7.646000000000001);
    ctx.bezierCurveTo(15.164, 7.722, 14.936, 7.798000000000001, 14.708, 7.8740000000000006);
    ctx.bezierCurveTo(14.898, 8.33, 15.088000000000001, 8.786000000000001, 15.278, 9.242);
    ctx.bezierCurveTo(15.784, 9.008000000000001, 15.92, 9.010000000000002, 16.532, 9.128);
    ctx.bezierCurveTo(16.532, 9.242, 16.532, 9.356, 16.532, 9.47);
    ctx.bezierCurveTo(16.709, 9.571000000000002, 16.771, 9.637, 16.874, 9.812000000000001);
    ctx.bezierCurveTo(17.003, 9.716000000000001, 16.891, 9.826, 16.988, 9.698);
    ctx.bezierCurveTo(17.126, 9.625, 17.152, 9.512, 17.216, 9.47);
    ctx.bezierCurveTo(17.292, 9.47, 17.368000000000002, 9.47, 17.444000000000003, 9.47);
    ctx.bezierCurveTo(17.444000000000003, 9.432, 17.444000000000003, 9.394, 17.444000000000003, 9.356);
    ctx.bezierCurveTo(17.520000000000003, 9.356, 17.596000000000004, 9.356, 17.672000000000004, 9.356);
    ctx.bezierCurveTo(17.710000000000004, 9.28, 17.748000000000005, 9.204, 17.786000000000005, 9.128);
    ctx.bezierCurveTo(17.938000000000006, 9.09, 18.090000000000003, 9.052, 18.242000000000004, 9.014);
    ctx.bezierCurveTo(18.280000000000005, 8.937999999999999, 18.318000000000005, 8.862, 18.356000000000005, 8.786);
    ctx.bezierCurveTo(18.432000000000006, 8.786, 18.508000000000006, 8.786, 18.584000000000007, 8.786);
    ctx.bezierCurveTo(18.546000000000006, 8.709999999999999, 18.508000000000006, 8.634, 18.470000000000006, 8.558);
    ctx.bezierCurveTo(18.584000000000007, 8.52, 18.698000000000008, 8.482, 18.812000000000005, 8.443999999999999);
    ctx.bezierCurveTo(18.812000000000005, 8.405999999999999, 18.812000000000005, 8.367999999999999, 18.812000000000005, 8.329999999999998);
    ctx.bezierCurveTo(18.926000000000005, 8.253999999999998, 19.040000000000006, 8.177999999999999, 19.154000000000003, 8.101999999999999);
    ctx.bezierCurveTo(19.154000000000003, 8.025999999999998, 19.154000000000003, 7.949999999999998, 19.154000000000003, 7.873999999999999);
    ctx.bezierCurveTo(19.268000000000004, 7.797999999999999, 19.382000000000005, 7.721999999999999, 19.496000000000002, 7.645999999999999);
    ctx.bezierCurveTo(19.458000000000002, 7.569999999999999, 19.42, 7.493999999999999, 19.382, 7.417999999999999);
    ctx.bezierCurveTo(19.458000000000002, 7.417999999999999, 19.534000000000002, 7.417999999999999, 19.610000000000003, 7.417999999999999);
    ctx.bezierCurveTo(19.610000000000003, 7.379999999999999, 19.610000000000003, 7.342, 19.610000000000003, 7.303999999999999);
    ctx.bezierCurveTo(19.844000000000005, 7.108999999999999, 19.962000000000003, 7.093999999999999, 20.408, 7.076);
    ctx.bezierCurveTo(20.332, 7.494, 20.256, 7.912, 20.18, 8.328999999999999);
    ctx.bezierCurveTo(20.368, 8.480999999999998, 20.472, 8.722999999999999, 20.636, 8.899);
    ctx.bezierCurveTo(20.712, 8.937, 20.788, 8.975, 20.864, 9.013);
    ctx.bezierCurveTo(20.864, 9.089, 20.864, 9.165, 20.864, 9.241);
    ctx.bezierCurveTo(20.94, 9.279, 21.016000000000002, 9.317, 21.092000000000002, 9.355);
    ctx.bezierCurveTo(21.092000000000002, 9.659, 21.092000000000002, 9.963000000000001, 21.092000000000002, 10.267000000000001);
    ctx.bezierCurveTo(21.130000000000003, 10.267000000000001, 21.168000000000003, 10.267000000000001, 21.206000000000003, 10.267000000000001);
    ctx.bezierCurveTo(21.244000000000003, 10.381000000000002, 21.282000000000004, 10.495000000000001, 21.320000000000004, 10.609000000000002);
    ctx.bezierCurveTo(21.396000000000004, 10.609000000000002, 21.472000000000005, 10.609000000000002, 21.548000000000005, 10.609000000000002);
    ctx.bezierCurveTo(21.510000000000005, 10.685000000000002, 21.472000000000005, 10.761000000000001, 21.434000000000005, 10.837000000000002);
    ctx.bezierCurveTo(21.586000000000006, 10.875000000000002, 21.738000000000003, 10.913000000000002, 21.890000000000004, 10.951000000000002);
    ctx.bezierCurveTo(21.928000000000004, 11.027000000000003, 21.966000000000005, 11.103000000000002, 22.004000000000005, 11.179000000000002);
    ctx.bezierCurveTo(22.080000000000005, 11.179000000000002, 22.156000000000006, 11.179000000000002, 22.232000000000006, 11.179000000000002);
    ctx.bezierCurveTo(22.270000000000007, 11.255000000000003, 22.308000000000007, 11.331000000000001, 22.346000000000007, 11.407000000000002);
    ctx.bezierCurveTo(22.498000000000008, 11.521000000000003, 22.650000000000006, 11.635000000000002, 22.802000000000007, 11.749000000000002);
    ctx.bezierCurveTo(22.802000000000007, 11.825000000000003, 22.802000000000007, 11.901000000000002, 22.802000000000007, 11.977000000000002);
    ctx.bezierCurveTo(22.878000000000007, 12.015000000000002, 22.954000000000008, 12.053000000000003, 23.03000000000001, 12.091000000000003);
    ctx.bezierCurveTo(23.03000000000001, 12.205000000000004, 23.03000000000001, 12.319000000000003, 23.03000000000001, 12.433000000000003);
    ctx.bezierCurveTo(21.83300000000001, 12.409000000000004, 21.232000000000006, 12.605000000000004, 20.40800000000001, 12.889000000000003);
    ctx.bezierCurveTo(20.256000000000007, 12.889000000000003, 20.10400000000001, 12.889000000000003, 19.95200000000001, 12.889000000000003);
    ctx.bezierCurveTo(19.95200000000001, 12.927000000000003, 19.95200000000001, 12.965000000000003, 19.95200000000001, 13.003000000000004);
    ctx.bezierCurveTo(19.800000000000008, 13.041000000000004, 19.64800000000001, 13.079000000000004, 19.49600000000001, 13.117000000000004);
    ctx.bezierCurveTo(19.49600000000001, 13.193000000000005, 19.49600000000001, 13.269000000000004, 19.49600000000001, 13.345000000000004);
    ctx.bezierCurveTo(19.42000000000001, 13.307000000000004, 19.34400000000001, 13.269000000000004, 19.268000000000008, 13.231000000000003);
    ctx.bezierCurveTo(19.268000000000008, 13.269000000000004, 19.268000000000008, 13.307000000000004, 19.268000000000008, 13.345000000000004);
    ctx.bezierCurveTo(19.230000000000008, 13.345000000000004, 19.192000000000007, 13.345000000000004, 19.154000000000007, 13.345000000000004);
    ctx.bezierCurveTo(19.154000000000007, 13.421000000000005, 19.154000000000007, 13.497000000000003, 19.154000000000007, 13.573000000000004);
    ctx.bezierCurveTo(19.116000000000007, 13.573000000000004, 19.078000000000007, 13.573000000000004, 19.040000000000006, 13.573000000000004);
    ctx.bezierCurveTo(19.040000000000006, 13.535000000000004, 19.040000000000006, 13.497000000000003, 19.040000000000006, 13.459000000000003);
    ctx.bezierCurveTo(18.851000000000006, 13.359000000000004, 18.942000000000007, 13.614000000000003, 18.926000000000005, 13.687000000000003);
    ctx.bezierCurveTo(18.611000000000004, 13.770000000000003, 18.671000000000006, 13.719000000000003, 18.584000000000007, 14.029000000000003);
    ctx.bezierCurveTo(18.546000000000006, 14.029000000000003, 18.508000000000006, 14.029000000000003, 18.470000000000006, 14.029000000000003);
    ctx.bezierCurveTo(18.508000000000006, 14.105000000000004, 18.546000000000006, 14.181000000000003, 18.584000000000007, 14.257000000000003);
    ctx.bezierCurveTo(18.508000000000006, 14.257000000000003, 18.432000000000006, 14.257000000000003, 18.356000000000005, 14.257000000000003);
    ctx.bezierCurveTo(18.344000000000005, 14.418000000000003, 18.335000000000004, 14.296000000000003, 18.470000000000006, 14.371000000000004);
    ctx.bezierCurveTo(18.341000000000005, 14.500000000000004, 18.471000000000007, 14.419000000000004, 18.242000000000004, 14.485000000000005);
    ctx.bezierCurveTo(18.204000000000004, 14.675000000000004, 18.166000000000004, 14.865000000000006, 18.128000000000004, 15.055000000000005);
    ctx.bezierCurveTo(18.090000000000003, 15.055000000000005, 18.052000000000003, 15.055000000000005, 18.014000000000003, 15.055000000000005);
    ctx.bezierCurveTo(18.014000000000003, 15.359000000000005, 18.014000000000003, 15.663000000000006, 18.014000000000003, 15.967000000000006);
    ctx.bezierCurveTo(17.976000000000003, 15.967000000000006, 17.938000000000002, 15.967000000000006, 17.900000000000002, 15.967000000000006);
    ctx.bezierCurveTo(17.862000000000002, 16.119000000000007, 17.824, 16.271000000000004, 17.786, 16.423000000000005);
    ctx.bezierCurveTo(17.748, 16.423000000000005, 17.71, 16.423000000000005, 17.672, 16.423000000000005);
    ctx.bezierCurveTo(17.71, 16.499000000000006, 17.748, 16.575000000000006, 17.786, 16.651000000000007);
    ctx.bezierCurveTo(17.672, 16.689000000000007, 17.558, 16.727000000000007, 17.444000000000003, 16.765000000000008);
    ctx.bezierCurveTo(17.406000000000002, 16.95500000000001, 17.368000000000002, 17.145000000000007, 17.330000000000002, 17.335000000000008);
    ctx.bezierCurveTo(17.254, 17.373000000000008, 17.178, 17.41100000000001, 17.102, 17.44900000000001);
    ctx.bezierCurveTo(17.102, 17.48700000000001, 17.102, 17.52500000000001, 17.102, 17.56300000000001);
    ctx.bezierCurveTo(17.14, 17.56300000000001, 17.178, 17.56300000000001, 17.216, 17.56300000000001);
    ctx.bezierCurveTo(17.397000000000002, 17.70900000000001, 16.991, 17.67600000000001, 16.988, 17.67700000000001);
    ctx.bezierCurveTo(16.988, 17.943000000000012, 16.988, 18.20900000000001, 16.988, 18.47500000000001);
    ctx.bezierCurveTo(16.553, 18.66400000000001, 15.911, 19.17300000000001, 15.847999999999999, 19.72900000000001);
    ctx.bezierCurveTo(15.771999999999998, 19.72900000000001, 15.696, 19.72900000000001, 15.62, 19.72900000000001);
    ctx.bezierCurveTo(15.475999999999999, 19.98900000000001, 14.79, 20.38500000000001, 15.049999999999999, 20.64100000000001);
    ctx.bezierCurveTo(14.973999999999998, 20.64100000000001, 14.898, 20.64100000000001, 14.822, 20.64100000000001);
    ctx.bezierCurveTo(14.822, 20.90700000000001, 14.822, 21.17300000000001, 14.822, 21.439000000000007);
    ctx.bezierCurveTo(14.86, 21.439000000000007, 14.898, 21.439000000000007, 14.936, 21.439000000000007);
    ctx.bezierCurveTo(14.936, 21.515000000000008, 14.936, 21.591000000000008, 14.936, 21.66700000000001);
    ctx.bezierCurveTo(14.974, 21.66700000000001, 15.012, 21.66700000000001, 15.05, 21.66700000000001);
    ctx.bezierCurveTo(15.05, 21.70500000000001, 15.05, 21.74300000000001, 15.05, 21.78100000000001);
    ctx.bezierCurveTo(15.012, 21.78100000000001, 14.974, 21.78100000000001, 14.936, 21.78100000000001);
    ctx.bezierCurveTo(14.822, 21.922000000000008, 14.692, 21.899000000000008, 14.594, 22.00900000000001);
    ctx.bezierCurveTo(14.594, 22.08500000000001, 14.594, 22.161000000000012, 14.594, 22.237000000000013);
    ctx.bezierCurveTo(14.517999999999999, 22.199000000000012, 14.442, 22.161000000000012, 14.366, 22.12300000000001);
    ctx.bezierCurveTo(14.328, 22.237000000000013, 14.29, 22.351000000000013, 14.251999999999999, 22.46500000000001);
    ctx.bezierCurveTo(14.206, 22.49600000000001, 13.994, 22.29700000000001, 13.796, 22.35100000000001);
    ctx.bezierCurveTo(13.796, 22.38900000000001, 13.796, 22.42700000000001, 13.796, 22.46500000000001);
    ctx.bezierCurveTo(13.34, 22.46500000000001, 12.883999999999999, 22.46500000000001, 12.427999999999999, 22.46500000000001);
    ctx.bezierCurveTo(12.422999999999998, 21.91000000000001, 12.568, 21.35400000000001, 12.77, 20.98300000000001);
    ctx.bezierCurveTo(12.808, 20.98300000000001, 12.846, 20.98300000000001, 12.884, 20.98300000000001);
    ctx.bezierCurveTo(12.884, 20.90700000000001, 12.884, 20.83100000000001, 12.884, 20.75500000000001);
    ctx.bezierCurveTo(12.96, 20.71700000000001, 13.036, 20.67900000000001, 13.112, 20.64100000000001);
    ctx.bezierCurveTo(13.233, 20.44400000000001, 13.32, 19.90400000000001, 13.226, 19.84300000000001);
    ctx.bezierCurveTo(13.302000000000001, 19.84300000000001, 13.378, 19.84300000000001, 13.454, 19.84300000000001);
    ctx.bezierCurveTo(13.476, 19.14000000000001, 13.577, 18.68600000000001, 13.454, 18.02000000000001);
    ctx.bezierCurveTo(13.378, 18.02000000000001, 13.302000000000001, 18.02000000000001, 13.226, 18.02000000000001);
    ctx.bezierCurveTo(13.104000000000001, 17.91500000000001, 13.340000000000002, 17.90600000000001, 13.340000000000002, 17.90600000000001);
    ctx.bezierCurveTo(13.340000000000002, 17.86800000000001, 13.340000000000002, 17.83000000000001, 13.340000000000002, 17.79200000000001);
    ctx.bezierCurveTo(13.117, 17.38900000000001, 13.420000000000002, 16.60700000000001, 13.226, 16.19600000000001);
    ctx.bezierCurveTo(13.112, 16.120000000000008, 12.998000000000001, 16.044000000000008, 12.884, 15.968000000000009);
    ctx.bezierCurveTo(12.597, 15.530000000000008, 12.32, 14.62400000000001, 12.314, 13.917000000000009);
    ctx.bezierCurveTo(12.238, 13.955000000000009, 12.162, 13.99300000000001, 12.086, 14.03100000000001);
    ctx.bezierCurveTo(12.086, 13.955000000000009, 12.086, 13.87900000000001, 12.086, 13.80300000000001);
    ctx.bezierCurveTo(11.82, 13.61300000000001, 11.554, 13.423000000000009, 11.288, 13.23300000000001);
    ctx.bezierCurveTo(11.288, 13.157000000000009, 11.288, 13.08100000000001, 11.288, 13.00500000000001);
    ctx.bezierCurveTo(11.212, 12.96700000000001, 11.136000000000001, 12.92900000000001, 11.06, 12.891000000000009);
    ctx.bezierCurveTo(11.06, 12.815000000000008, 11.06, 12.73900000000001, 11.06, 12.66300000000001);
    ctx.bezierCurveTo(11.022, 12.66300000000001, 10.984, 12.66300000000001, 10.946, 12.66300000000001);
    ctx.bezierCurveTo(10.87, 12.43500000000001, 10.794, 12.20700000000001, 10.718, 11.97900000000001);
    ctx.bezierCurveTo(10.68, 11.97900000000001, 10.642, 11.97900000000001, 10.604, 11.97900000000001);
    ctx.bezierCurveTo(10.604, 11.865000000000009, 10.604, 11.75100000000001, 10.604, 11.63700000000001);
    ctx.bezierCurveTo(10.489999999999998, 11.599000000000009, 10.376, 11.561000000000009, 10.261999999999999, 11.523000000000009);
    ctx.bezierCurveTo(10.299999999999999, 11.447000000000008, 10.338, 11.37100000000001, 10.376, 11.295000000000009);
    ctx.bezierCurveTo(10.299999999999999, 11.257000000000009, 10.224, 11.219000000000008, 10.148, 11.181000000000008);
    ctx.bezierCurveTo(10.148, 11.105000000000008, 10.148, 11.029000000000009, 10.148, 10.953000000000008);
    ctx.bezierCurveTo(10.11, 10.953000000000008, 10.072, 10.953000000000008, 10.033999999999999, 10.953000000000008);
    ctx.bezierCurveTo(9.749999999999998, 10.619000000000009, 9.267999999999999, 10.154000000000009, 8.78, 10.041000000000007);
    ctx.bezierCurveTo(8.78, 9.965000000000007, 8.78, 9.889000000000008, 8.78, 9.813000000000008);
    ctx.bezierCurveTo(8.665, 9.772, 8.551, 9.734, 8.437, 9.696);
    ctx.bezierCurveTo(8.437, 9.658, 8.437, 9.62, 8.437, 9.581999999999999);
    ctx.bezierCurveTo(8.277, 9.459999999999999, 7.997999999999999, 9.29, 7.866999999999999, 9.467999999999998);
    ctx.bezierCurveTo(7.866999999999999, 9.391999999999998, 7.866999999999999, 9.315999999999999, 7.866999999999999, 9.239999999999998);
    ctx.bezierCurveTo(7.411, 9.164, 6.955, 9.088, 6.499, 9.012);
    ctx.bezierCurveTo(6.499, 8.974, 6.499, 8.936, 6.499, 8.898);
    ctx.bezierCurveTo(6.271, 8.822, 6.042, 8.746, 5.814, 8.67);
    ctx.bezierCurveTo(5.814, 8.632, 5.814, 8.594, 5.814, 8.556);
    ctx.bezierCurveTo(5.207, 8.594, 4.599, 8.632, 3.99, 8.67);
    ctx.bezierCurveTo(3.99, 8.632, 3.99, 8.594, 3.99, 8.556);
    ctx.bezierCurveTo(3.602, 8.441, 3.248, 8.621, 2.964, 8.442);
    ctx.bezierCurveTo(2.888, 8.328, 2.813, 8.214, 2.736, 8.101);
    ctx.bezierCurveTo(2.66, 8.138, 2.584, 8.176, 2.508, 8.214);
    ctx.bezierCurveTo(2.508, 8.1, 2.508, 7.986000000000001, 2.508, 7.872000000000001);
    ctx.bezierCurveTo(2.356, 7.834, 2.204, 7.796, 2.052, 7.758);
    ctx.bezierCurveTo(2.014, 7.645, 1.976, 7.53, 1.938, 7.417);
    ctx.bezierCurveTo(1.976, 7.417, 2.014, 7.417, 2.052, 7.417);
    ctx.bezierCurveTo(2.052, 7.075, 2.052, 6.733, 2.052, 6.391);
    ctx.bezierCurveTo(2.0140000000000002, 6.391, 1.976, 6.391, 1.938, 6.391);
    ctx.bezierCurveTo(1.938, 6.315, 1.938, 6.239, 1.938, 6.163);
    ctx.bezierCurveTo(1.9, 6.163, 1.8619999999999999, 6.163, 1.8239999999999998, 6.163);
    ctx.bezierCurveTo(1.8239999999999998, 5.897, 1.8239999999999998, 5.631, 1.8239999999999998, 5.365);
    ctx.bezierCurveTo(1.513, 5.185, 1.545, 5.053, 1.026, 5.023);
    ctx.bezierCurveTo(1.026, 5.061, 1.026, 5.098999999999999, 1.026, 5.137);
    ctx.bezierCurveTo(0.95, 5.175, 0.874, 5.213, 0.798, 5.251);
    ctx.bezierCurveTo(0.798, 5.175000000000001, 0.798, 5.099, 0.798, 5.023000000000001);
    ctx.bezierCurveTo(0.569, 4.958, 0.7, 5.037, 0.57, 4.909);
    ctx.bezierCurveTo(0.608, 4.909, 0.6459999999999999, 4.909, 0.6839999999999999, 4.909);
    ctx.bezierCurveTo(0.6839999999999999, 4.795, 0.6839999999999999, 4.681, 0.6839999999999999, 4.567);
    ctx.bezierCurveTo(0.49399999999999994, 4.567, 0.30399999999999994, 4.567, 0.11399999999999999, 4.567);
    ctx.bezierCurveTo(0.076, 4.453, 0.038, 4.339, 0, 4.226);
    ctx.bezierCurveTo(0.038, 4.226, 0.076, 4.226, 0.114, 4.226);
    ctx.bezierCurveTo(0.114, 4.074, 0.114, 3.922, 0.114, 3.77);
    ctx.bezierCurveTo(0.228, 3.732, 0.342, 3.694, 0.456, 3.656);
    ctx.bezierCurveTo(0.67, 3.484, 0.76, 3.218, 0.798, 2.858);
    ctx.bezierCurveTo(0.988, 2.858, 1.178, 2.858, 1.3679999999999999, 2.858);
    ctx.bezierCurveTo(1.3679999999999999, 2.782, 1.3679999999999999, 2.706, 1.3679999999999999, 2.63);
    ctx.bezierCurveTo(1.482, 2.63, 1.5959999999999999, 2.63, 1.71, 2.63);
    ctx.bezierCurveTo(1.71, 2.554, 1.71, 2.4779999999999998, 1.71, 2.4019999999999997);
    ctx.bezierCurveTo(1.8679999999999999, 2.4309999999999996, 1.697, 2.417, 1.824, 2.5159999999999996);
    ctx.bezierCurveTo(1.976, 2.44, 2.128, 2.364, 2.28, 2.288);
    ctx.bezierCurveTo(2.28, 2.25, 2.28, 2.2119999999999997, 2.28, 2.174);
    ctx.bezierCurveTo(2.356, 2.174, 2.432, 2.174, 2.508, 2.174);
    ctx.bezierCurveTo(2.573, 1.896, 2.628, 1.923, 2.736, 1.718);
    ctx.bezierCurveTo(2.888, 1.832, 3.041, 1.946, 3.192, 2.06);
    ctx.bezierCurveTo(3.192, 2.098, 3.192, 2.136, 3.192, 2.174);
    ctx.bezierCurveTo(3.269, 2.136, 3.344, 2.098, 3.42, 2.06);
    ctx.bezierCurveTo(3.42, 2.136, 3.42, 2.212, 3.42, 2.2880000000000003);
    ctx.bezierCurveTo(3.551, 2.42, 3.728, 2.389, 3.99, 2.402);
    ctx.bezierCurveTo(3.99, 2.326, 3.99, 2.25, 3.99, 2.174);
    ctx.bezierCurveTo(4.12, 2.27, 4.007, 2.159, 4.104, 2.288);
    ctx.bezierCurveTo(4.5200000000000005, 2.694, 4.5520000000000005, 3.5309999999999997, 4.674, 4.226);
    ctx.bezierCurveTo(4.788, 4.264, 4.902, 4.302, 5.016, 4.34);
    ctx.bezierCurveTo(5.055, 4.453, 5.092, 4.567, 5.13, 4.681);
    ctx.bezierCurveTo(5.244, 4.643, 5.358, 4.605, 5.4719999999999995, 4.567);
    ctx.bezierCurveTo(5.481, 4.867, 5.515999999999999, 4.955, 5.585999999999999, 5.1370000000000005);
    ctx.bezierCurveTo(5.8149999999999995, 5.072, 5.909, 5.0520000000000005, 6.042, 4.909000000000001);
    ctx.bezierCurveTo(6.042, 4.833000000000001, 6.042, 4.757000000000001, 6.042, 4.681000000000001);
    ctx.bezierCurveTo(6.08, 4.681000000000001, 6.117999999999999, 4.681000000000001, 6.156, 4.681000000000001);
    ctx.bezierCurveTo(6.156, 4.719000000000001, 6.156, 4.757000000000001, 6.156, 4.795000000000001);
    ctx.bezierCurveTo(6.231999999999999, 4.757000000000001, 6.308, 4.719000000000001, 6.3839999999999995, 4.681000000000001);
    ctx.bezierCurveTo(6.3839999999999995, 4.719000000000001, 6.3839999999999995, 4.757000000000001, 6.3839999999999995, 4.795000000000001);
    ctx.bezierCurveTo(6.5089999999999995, 4.897000000000001, 6.4079999999999995, 4.775000000000001, 6.497999999999999, 4.909000000000001);
    ctx.bezierCurveTo(6.459999999999999, 4.909000000000001, 6.422, 4.909000000000001, 6.3839999999999995, 4.909000000000001);
    ctx.bezierCurveTo(6.273, 5.098, 6.549, 5.005, 6.613, 5.023);
    ctx.lineTo(6.727, 4.909);
    ctx.bezierCurveTo(6.765000000000001, 5.099, 6.803, 5.289, 6.841, 5.479);
    ctx.bezierCurveTo(6.955, 5.517, 7.069, 5.555, 7.183, 5.593);
    ctx.bezierCurveTo(7.183, 5.631, 7.183, 5.669, 7.183, 5.707);
    ctx.bezierCurveTo(7.322, 5.818, 7.404, 5.787, 7.5249999999999995, 5.935);
    ctx.bezierCurveTo(7.866999999999999, 5.973, 8.209, 6.010999999999999, 8.551, 6.0489999999999995);
    ctx.bezierCurveTo(8.589, 5.935, 8.627, 5.821, 8.665000000000001, 5.707);
    ctx.bezierCurveTo(8.936, 5.684, 8.947, 5.66, 9.121, 5.593);
    ctx.bezierCurveTo(9.011000000000001, 5.447, 8.871, 5.475, 8.779, 5.365);
    ctx.bezierCurveTo(8.779, 5.289000000000001, 8.779, 5.213, 8.779, 5.1370000000000005);
    ctx.bezierCurveTo(8.665, 5.099, 8.551, 5.061, 8.437, 5.023);
    ctx.bezierCurveTo(8.442, 4.58, 8.474, 4.454, 8.665, 4.226);
    ctx.bezierCurveTo(8.741, 4.188, 8.816999999999998, 4.15, 8.892999999999999, 4.112);
    ctx.bezierCurveTo(8.855, 3.998, 8.817, 3.883, 8.779, 3.77);
    ctx.bezierCurveTo(8.779, 3.77, 8.967, 3.622, 9.007, 3.542);
    ctx.bezierCurveTo(8.663, 3.463, 8.258, 2.789, 7.981, 3.085);
    ctx.bezierCurveTo(7.981, 3.009, 7.981, 2.933, 7.981, 2.8569999999999998);
    ctx.bezierCurveTo(7.796, 2.98, 7.92, 3.051, 7.867, 3.085);
    ctx.bezierCurveTo(7.795, 3.131, 7.627, 2.877, 7.411, 2.971);
    ctx.bezierCurveTo(7.335, 3.085, 7.259, 3.2, 7.183, 3.313);
    ctx.bezierCurveTo(7.02, 3.367, 7.021, 3.121, 6.955, 3.085);
    ctx.bezierCurveTo(6.8790000000000004, 3.085, 6.803, 3.085, 6.727, 3.085);
    ctx.bezierCurveTo(6.727, 3.047, 6.727, 3.009, 6.727, 2.971);
    ctx.bezierCurveTo(6.362, 2.781, 6.006, 2.7560000000000002, 5.473000000000001, 2.743);
    ctx.bezierCurveTo(5.473000000000001, 2.667, 5.473000000000001, 2.5909999999999997, 5.473000000000001, 2.5149999999999997);
    ctx.bezierCurveTo(5.549, 2.5149999999999997, 5.625000000000001, 2.5149999999999997, 5.7010000000000005, 2.5149999999999997);
    ctx.bezierCurveTo(5.793, 2.1479999999999997, 5.993, 2.1099999999999994, 6.157000000000001, 1.8309999999999995);
    ctx.bezierCurveTo(6.081000000000001, 1.8309999999999995, 6.005000000000001, 1.8309999999999995, 5.929000000000001, 1.8309999999999995);
    ctx.bezierCurveTo(5.883000000000001, 1.3729999999999996, 5.7970000000000015, 1.4189999999999996, 5.929000000000001, 1.0329999999999995);
    ctx.bezierCurveTo(6.004, 1.072, 6.081, 1.11, 6.157, 1.148);
    ctx.bezierCurveTo(6.195, 1.262, 6.232, 1.376, 6.271, 1.49);
    ctx.bezierCurveTo(6.3469999999999995, 1.49, 6.423, 1.49, 6.499, 1.49);
    ctx.bezierCurveTo(6.46, 1.566, 6.423, 1.642, 6.385, 1.718);
    ctx.bezierCurveTo(6.423, 1.718, 6.460999999999999, 1.718, 6.499, 1.718);
    ctx.bezierCurveTo(6.632, 1.873, 6.707, 1.892, 6.955, 1.946);
    ctx.bezierCurveTo(6.955, 1.8319999999999999, 6.955, 1.718, 6.955, 1.6039999999999999);
    ctx.bezierCurveTo(7.107, 1.6039999999999999, 7.259, 1.6039999999999999, 7.4110000000000005, 1.6039999999999999);
    ctx.bezierCurveTo(7.373, 1.49, 7.335, 1.376, 7.297, 1.262);
    ctx.bezierCurveTo(7.373, 1.3, 7.449, 1.338, 7.525, 1.376);
    ctx.bezierCurveTo(7.525, 1.3379999999999999, 7.525, 1.2999999999999998, 7.525, 1.2619999999999998);
    ctx.bezierCurveTo(7.563000000000001, 1.2619999999999998, 7.601, 1.2619999999999998, 7.639, 1.2619999999999998);
    ctx.bezierCurveTo(7.601, 1.0719999999999998, 7.563000000000001, 0.8819999999999998, 7.525, 0.6919999999999998);
    ctx.bezierCurveTo(7.563000000000001, 0.6919999999999998, 7.601, 0.6919999999999998, 7.639, 0.6919999999999998);
    ctx.bezierCurveTo(7.769, 0.5619999999999998, 7.639, 0.6469999999999998, 7.867, 0.5779999999999998);
    ctx.bezierCurveTo(7.867, 0.5019999999999999, 7.867, 0.4259999999999998, 7.867, 0.34999999999999987);
    ctx.bezierCurveTo(8.358, 0.48099999999999987, 8.256, 0.32099999999999984, 8.665, 0.12199999999999986);
    ctx.bezierCurveTo(8.665, 0.08399999999999985, 8.665, 0.04599999999999986, 8.665, 0.007999999999999854);
    ctx.bezierCurveTo(8.827, -0.04900000000000015, 8.828999999999999, 0.21099999999999985, 8.892999999999999, 0.23599999999999988);
    ctx.bezierCurveTo(9.26, 0.383, 9.427, 0.259, 9.691, 0.351);
    ctx.bezierCurveTo(9.833, 0.7629999999999999, 9.678, 0.997, 9.805000000000001, 1.376);
    ctx.bezierCurveTo(10.909000000000002, 0.9259999999999999, 11.771, 1.458, 12.769000000000002, 1.718);
    ctx.bezierCurveTo(12.906000000000002, 1.4689999999999999, 13.020000000000001, 1.343, 13.339000000000002, 1.262);
    ctx.bezierCurveTo(13.339000000000002, 1.3, 13.339000000000002, 1.338, 13.339000000000002, 1.3760000000000001);
    ctx.bezierCurveTo(13.491000000000001, 1.3760000000000001, 13.643000000000002, 1.3760000000000001, 13.795000000000002, 1.3760000000000001);
    ctx.bezierCurveTo(13.795000000000002, 1.4140000000000001, 13.795000000000002, 1.4520000000000002, 13.795000000000002, 1.4900000000000002);
    ctx.bezierCurveTo(14.232, 1.7, 14.57, 1.656, 14.708, 2.174);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    ctx.restore();
    ctx.restore();
}

function paintLake() {

    // If the shape is clicked, display a fact
    // and paint the lake.
    // Display a fact.
    alert("Lake Michigan is one of the five Great Lakes of America.");

    // Fill the lake with blue.
    ctx.fillStyle = "blue";
    ctx.fill();
    ctx.scale(200, 200);
}

function makeLake() {

    // These methods draw the shape of the lake.

}

  Lake Michigan

 <canvas id="canvas" width="25" height="25" onclick="paintLake()">
 </canvas>

    Click on the lake to learn a fact about Lake Michigan.

Body:
DEMO

// Global variables
var canvas;
var ctx;
// This function is called when the page loads.
function init() {

    // Initialize canvas and get context.
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");

    // Draw on the context.
    draw(ctx);
}

function draw(ctx) {

    // Draw on the canvas.
    // Get the drawing coordinates.
    ctx.save();
    ctx.translate(0, 0);
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(23.03, 0);
    ctx.lineTo(23.03, 22.464);
    ctx.lineTo(0, 22.464);
    ctx.closePath();
    ctx.clip();
    ctx.translate(0, 0);
    ctx.translate(0, 0);
    ctx.scale(1, 1);
    ctx.translate(0, 0);
    ctx.strokeStyle = 'rgba(0,0,0,0)';
    ctx.lineCap = 'butt';
    ctx.lineJoin = 'miter';
    ctx.miterLimit = 4;
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(14.708, 2.174);
    ctx.bezierCurveTo(14.518, 2.2119999999999997, 14.328, 2.25, 14.138, 2.288);
    ctx.bezierCurveTo(14.138, 2.3259999999999996, 14.138, 2.364, 14.138, 2.4019999999999997);
    ctx.bezierCurveTo(14.1, 2.4019999999999997, 14.062, 2.4019999999999997, 14.024, 2.4019999999999997);
    ctx.bezierCurveTo(14.024, 2.5919999999999996, 14.024, 2.7819999999999996, 14.024, 2.9719999999999995);
    ctx.bezierCurveTo(14.276, 3.1989999999999994, 14.299, 3.5759999999999996, 14.594, 3.7699999999999996);
    ctx.bezierCurveTo(14.724, 3.8999999999999995, 14.594, 3.8149999999999995, 14.822, 3.8839999999999995);
    ctx.bezierCurveTo(14.889999999999999, 4.1419999999999995, 14.918999999999999, 4.164999999999999, 15.049999999999999, 4.34);
    ctx.bezierCurveTo(15.088, 4.34, 15.126, 4.34, 15.164, 4.34);
    ctx.bezierCurveTo(15.164, 4.4159999999999995, 15.164, 4.492, 15.164, 4.568);
    ctx.bezierCurveTo(15.202, 4.568, 15.24, 4.568, 15.278, 4.568);
    ctx.bezierCurveTo(15.316, 5.024, 15.354000000000001, 5.4799999999999995, 15.392000000000001, 5.936);
    ctx.bezierCurveTo(15.354000000000001, 5.936, 15.316, 5.936, 15.278, 5.936);
    ctx.bezierCurveTo(15.24, 6.088, 15.202, 6.24, 15.164, 6.392);
    ctx.bezierCurveTo(15.126, 6.392, 15.088, 6.392, 15.049999999999999, 6.392);
    ctx.bezierCurveTo(14.995, 6.641, 15.351999999999999, 7.0760000000000005, 15.392, 7.19);
    ctx.bezierCurveTo(15.392, 7.3420000000000005, 15.392, 7.494000000000001, 15.392, 7.646000000000001);
    ctx.bezierCurveTo(15.164, 7.722, 14.936, 7.798000000000001, 14.708, 7.8740000000000006);
    ctx.bezierCurveTo(14.898, 8.33, 15.088000000000001, 8.786000000000001, 15.278, 9.242);
    ctx.bezierCurveTo(15.784, 9.008000000000001, 15.92, 9.010000000000002, 16.532, 9.128);
    ctx.bezierCurveTo(16.532, 9.242, 16.532, 9.356, 16.532, 9.47);
    ctx.bezierCurveTo(16.709, 9.571000000000002, 16.771, 9.637, 16.874, 9.812000000000001);
    ctx.bezierCurveTo(17.003, 9.716000000000001, 16.891, 9.826, 16.988, 9.698);
    ctx.bezierCurveTo(17.126, 9.625, 17.152, 9.512, 17.216, 9.47);
    ctx.bezierCurveTo(17.292, 9.47, 17.368000000000002, 9.47, 17.444000000000003, 9.47);
    ctx.bezierCurveTo(17.444000000000003, 9.432, 17.444000000000003, 9.394, 17.444000000000003, 9.356);
    ctx.bezierCurveTo(17.520000000000003, 9.356, 17.596000000000004, 9.356, 17.672000000000004, 9.356);
    ctx.bezierCurveTo(17.710000000000004, 9.28, 17.748000000000005, 9.204, 17.786000000000005, 9.128);
    ctx.bezierCurveTo(17.938000000000006, 9.09, 18.090000000000003, 9.052, 18.242000000000004, 9.014);
    ctx.bezierCurveTo(18.280000000000005, 8.937999999999999, 18.318000000000005, 8.862, 18.356000000000005, 8.786);
    ctx.bezierCurveTo(18.432000000000006, 8.786, 18.508000000000006, 8.786, 18.584000000000007, 8.786);
    ctx.bezierCurveTo(18.546000000000006, 8.709999999999999, 18.508000000000006, 8.634, 18.470000000000006, 8.558);
    ctx.bezierCurveTo(18.584000000000007, 8.52, 18.698000000000008, 8.482, 18.812000000000005, 8.443999999999999);
    ctx.bezierCurveTo(18.812000000000005, 8.405999999999999, 18.812000000000005, 8.367999999999999, 18.812000000000005, 8.329999999999998);
    ctx.bezierCurveTo(18.926000000000005, 8.253999999999998, 19.040000000000006, 8.177999999999999, 19.154000000000003, 8.101999999999999);
    ctx.bezierCurveTo(19.154000000000003, 8.025999999999998, 19.154000000000003, 7.949999999999998, 19.154000000000003, 7.873999999999999);
    ctx.bezierCurveTo(19.268000000000004, 7.797999999999999, 19.382000000000005, 7.721999999999999, 19.496000000000002, 7.645999999999999);
    ctx.bezierCurveTo(19.458000000000002, 7.569999999999999, 19.42, 7.493999999999999, 19.382, 7.417999999999999);
    ctx.bezierCurveTo(19.458000000000002, 7.417999999999999, 19.534000000000002, 7.417999999999999, 19.610000000000003, 7.417999999999999);
    ctx.bezierCurveTo(19.610000000000003, 7.379999999999999, 19.610000000000003, 7.342, 19.610000000000003, 7.303999999999999);
    ctx.bezierCurveTo(19.844000000000005, 7.108999999999999, 19.962000000000003, 7.093999999999999, 20.408, 7.076);
    ctx.bezierCurveTo(20.332, 7.494, 20.256, 7.912, 20.18, 8.328999999999999);
    ctx.bezierCurveTo(20.368, 8.480999999999998, 20.472, 8.722999999999999, 20.636, 8.899);
    ctx.bezierCurveTo(20.712, 8.937, 20.788, 8.975, 20.864, 9.013);
    ctx.bezierCurveTo(20.864, 9.089, 20.864, 9.165, 20.864, 9.241);
    ctx.bezierCurveTo(20.94, 9.279, 21.016000000000002, 9.317, 21.092000000000002, 9.355);
    ctx.bezierCurveTo(21.092000000000002, 9.659, 21.092000000000002, 9.963000000000001, 21.092000000000002, 10.267000000000001);
    ctx.bezierCurveTo(21.130000000000003, 10.267000000000001, 21.168000000000003, 10.267000000000001, 21.206000000000003, 10.267000000000001);
    ctx.bezierCurveTo(21.244000000000003, 10.381000000000002, 21.282000000000004, 10.495000000000001, 21.320000000000004, 10.609000000000002);
    ctx.bezierCurveTo(21.396000000000004, 10.609000000000002, 21.472000000000005, 10.609000000000002, 21.548000000000005, 10.609000000000002);
    ctx.bezierCurveTo(21.510000000000005, 10.685000000000002, 21.472000000000005, 10.761000000000001, 21.434000000000005, 10.837000000000002);
    ctx.bezierCurveTo(21.586000000000006, 10.875000000000002, 21.738000000000003, 10.913000000000002, 21.890000000000004, 10.951000000000002);
    ctx.bezierCurveTo(21.928000000000004, 11.027000000000003, 21.966000000000005, 11.103000000000002, 22.004000000000005, 11.179000000000002);
    ctx.bezierCurveTo(22.080000000000005, 11.179000000000002, 22.156000000000006, 11.179000000000002, 22.232000000000006, 11.179000000000002);
    ctx.bezierCurveTo(22.270000000000007, 11.255000000000003, 22.308000000000007, 11.331000000000001, 22.346000000000007, 11.407000000000002);
    ctx.bezierCurveTo(22.498000000000008, 11.521000000000003, 22.650000000000006, 11.635000000000002, 22.802000000000007, 11.749000000000002);
    ctx.bezierCurveTo(22.802000000000007, 11.825000000000003, 22.802000000000007, 11.901000000000002, 22.802000000000007, 11.977000000000002);
    ctx.bezierCurveTo(22.878000000000007, 12.015000000000002, 22.954000000000008, 12.053000000000003, 23.03000000000001, 12.091000000000003);
    ctx.bezierCurveTo(23.03000000000001, 12.205000000000004, 23.03000000000001, 12.319000000000003, 23.03000000000001, 12.433000000000003);
    ctx.bezierCurveTo(21.83300000000001, 12.409000000000004, 21.232000000000006, 12.605000000000004, 20.40800000000001, 12.889000000000003);
    ctx.bezierCurveTo(20.256000000000007, 12.889000000000003, 20.10400000000001, 12.889000000000003, 19.95200000000001, 12.889000000000003);
    ctx.bezierCurveTo(19.95200000000001, 12.927000000000003, 19.95200000000001, 12.965000000000003, 19.95200000000001, 13.003000000000004);
    ctx.bezierCurveTo(19.800000000000008, 13.041000000000004, 19.64800000000001, 13.079000000000004, 19.49600000000001, 13.117000000000004);
    ctx.bezierCurveTo(19.49600000000001, 13.193000000000005, 19.49600000000001, 13.269000000000004, 19.49600000000001, 13.345000000000004);
    ctx.bezierCurveTo(19.42000000000001, 13.307000000000004, 19.34400000000001, 13.269000000000004, 19.268000000000008, 13.231000000000003);
    ctx.bezierCurveTo(19.268000000000008, 13.269000000000004, 19.268000000000008, 13.307000000000004, 19.268000000000008, 13.345000000000004);
    ctx.bezierCurveTo(19.230000000000008, 13.345000000000004, 19.192000000000007, 13.345000000000004, 19.154000000000007, 13.345000000000004);
    ctx.bezierCurveTo(19.154000000000007, 13.421000000000005, 19.154000000000007, 13.497000000000003, 19.154000000000007, 13.573000000000004);
    ctx.bezierCurveTo(19.116000000000007, 13.573000000000004, 19.078000000000007, 13.573000000000004, 19.040000000000006, 13.573000000000004);
    ctx.bezierCurveTo(19.040000000000006, 13.535000000000004, 19.040000000000006, 13.497000000000003, 19.040000000000006, 13.459000000000003);
    ctx.bezierCurveTo(18.851000000000006, 13.359000000000004, 18.942000000000007, 13.614000000000003, 18.926000000000005, 13.687000000000003);
    ctx.bezierCurveTo(18.611000000000004, 13.770000000000003, 18.671000000000006, 13.719000000000003, 18.584000000000007, 14.029000000000003);
    ctx.bezierCurveTo(18.546000000000006, 14.029000000000003, 18.508000000000006, 14.029000000000003, 18.470000000000006, 14.029000000000003);
    ctx.bezierCurveTo(18.508000000000006, 14.105000000000004, 18.546000000000006, 14.181000000000003, 18.584000000000007, 14.257000000000003);
    ctx.bezierCurveTo(18.508000000000006, 14.257000000000003, 18.432000000000006, 14.257000000000003, 18.356000000000005, 14.257000000000003);
    ctx.bezierCurveTo(18.344000000000005, 14.418000000000003, 18.335000000000004, 14.296000000000003, 18.470000000000006, 14.371000000000004);
    ctx.bezierCurveTo(18.341000000000005, 14.500000000000004, 18.471000000000007, 14.419000000000004, 18.242000000000004, 14.485000000000005);
    ctx.bezierCurveTo(18.204000000000004, 14.675000000000004, 18.166000000000004, 14.865000000000006, 18.128000000000004, 15.055000000000005);
    ctx.bezierCurveTo(18.090000000000003, 15.055000000000005, 18.052000000000003, 15.055000000000005, 18.014000000000003, 15.055000000000005);
    ctx.bezierCurveTo(18.014000000000003, 15.359000000000005, 18.014000000000003, 15.663000000000006, 18.014000000000003, 15.967000000000006);
    ctx.bezierCurveTo(17.976000000000003, 15.967000000000006, 17.938000000000002, 15.967000000000006, 17.900000000000002, 15.967000000000006);
    ctx.bezierCurveTo(17.862000000000002, 16.119000000000007, 17.824, 16.271000000000004, 17.786, 16.423000000000005);
    ctx.bezierCurveTo(17.748, 16.423000000000005, 17.71, 16.423000000000005, 17.672, 16.423000000000005);
    ctx.bezierCurveTo(17.71, 16.499000000000006, 17.748, 16.575000000000006, 17.786, 16.651000000000007);
    ctx.bezierCurveTo(17.672, 16.689000000000007, 17.558, 16.727000000000007, 17.444000000000003, 16.765000000000008);
    ctx.bezierCurveTo(17.406000000000002, 16.95500000000001, 17.368000000000002, 17.145000000000007, 17.330000000000002, 17.335000000000008);
    ctx.bezierCurveTo(17.254, 17.373000000000008, 17.178, 17.41100000000001, 17.102, 17.44900000000001);
    ctx.bezierCurveTo(17.102, 17.48700000000001, 17.102, 17.52500000000001, 17.102, 17.56300000000001);
    ctx.bezierCurveTo(17.14, 17.56300000000001, 17.178, 17.56300000000001, 17.216, 17.56300000000001);
    ctx.bezierCurveTo(17.397000000000002, 17.70900000000001, 16.991, 17.67600000000001, 16.988, 17.67700000000001);
    ctx.bezierCurveTo(16.988, 17.943000000000012, 16.988, 18.20900000000001, 16.988, 18.47500000000001);
    ctx.bezierCurveTo(16.553, 18.66400000000001, 15.911, 19.17300000000001, 15.847999999999999, 19.72900000000001);
    ctx.bezierCurveTo(15.771999999999998, 19.72900000000001, 15.696, 19.72900000000001, 15.62, 19.72900000000001);
    ctx.bezierCurveTo(15.475999999999999, 19.98900000000001, 14.79, 20.38500000000001, 15.049999999999999, 20.64100000000001);
    ctx.bezierCurveTo(14.973999999999998, 20.64100000000001, 14.898, 20.64100000000001, 14.822, 20.64100000000001);
    ctx.bezierCurveTo(14.822, 20.90700000000001, 14.822, 21.17300000000001, 14.822, 21.439000000000007);
    ctx.bezierCurveTo(14.86, 21.439000000000007, 14.898, 21.439000000000007, 14.936, 21.439000000000007);
    ctx.bezierCurveTo(14.936, 21.515000000000008, 14.936, 21.591000000000008, 14.936, 21.66700000000001);
    ctx.bezierCurveTo(14.974, 21.66700000000001, 15.012, 21.66700000000001, 15.05, 21.66700000000001);
    ctx.bezierCurveTo(15.05, 21.70500000000001, 15.05, 21.74300000000001, 15.05, 21.78100000000001);
    ctx.bezierCurveTo(15.012, 21.78100000000001, 14.974, 21.78100000000001, 14.936, 21.78100000000001);
    ctx.bezierCurveTo(14.822, 21.922000000000008, 14.692, 21.899000000000008, 14.594, 22.00900000000001);
    ctx.bezierCurveTo(14.594, 22.08500000000001, 14.594, 22.161000000000012, 14.594, 22.237000000000013);
    ctx.bezierCurveTo(14.517999999999999, 22.199000000000012, 14.442, 22.161000000000012, 14.366, 22.12300000000001);
    ctx.bezierCurveTo(14.328, 22.237000000000013, 14.29, 22.351000000000013, 14.251999999999999, 22.46500000000001);
    ctx.bezierCurveTo(14.206, 22.49600000000001, 13.994, 22.29700000000001, 13.796, 22.35100000000001);
    ctx.bezierCurveTo(13.796, 22.38900000000001, 13.796, 22.42700000000001, 13.796, 22.46500000000001);
    ctx.bezierCurveTo(13.34, 22.46500000000001, 12.883999999999999, 22.46500000000001, 12.427999999999999, 22.46500000000001);
    ctx.bezierCurveTo(12.422999999999998, 21.91000000000001, 12.568, 21.35400000000001, 12.77, 20.98300000000001);
    ctx.bezierCurveTo(12.808, 20.98300000000001, 12.846, 20.98300000000001, 12.884, 20.98300000000001);
    ctx.bezierCurveTo(12.884, 20.90700000000001, 12.884, 20.83100000000001, 12.884, 20.75500000000001);
    ctx.bezierCurveTo(12.96, 20.71700000000001, 13.036, 20.67900000000001, 13.112, 20.64100000000001);
    ctx.bezierCurveTo(13.233, 20.44400000000001, 13.32, 19.90400000000001, 13.226, 19.84300000000001);
    ctx.bezierCurveTo(13.302000000000001, 19.84300000000001, 13.378, 19.84300000000001, 13.454, 19.84300000000001);
    ctx.bezierCurveTo(13.476, 19.14000000000001, 13.577, 18.68600000000001, 13.454, 18.02000000000001);
    ctx.bezierCurveTo(13.378, 18.02000000000001, 13.302000000000001, 18.02000000000001, 13.226, 18.02000000000001);
    ctx.bezierCurveTo(13.104000000000001, 17.91500000000001, 13.340000000000002, 17.90600000000001, 13.340000000000002, 17.90600000000001);
    ctx.bezierCurveTo(13.340000000000002, 17.86800000000001, 13.340000000000002, 17.83000000000001, 13.340000000000002, 17.79200000000001);
    ctx.bezierCurveTo(13.117, 17.38900000000001, 13.420000000000002, 16.60700000000001, 13.226, 16.19600000000001);
    ctx.bezierCurveTo(13.112, 16.120000000000008, 12.998000000000001, 16.044000000000008, 12.884, 15.968000000000009);
    ctx.bezierCurveTo(12.597, 15.530000000000008, 12.32, 14.62400000000001, 12.314, 13.917000000000009);
    ctx.bezierCurveTo(12.238, 13.955000000000009, 12.162, 13.99300000000001, 12.086, 14.03100000000001);
    ctx.bezierCurveTo(12.086, 13.955000000000009, 12.086, 13.87900000000001, 12.086, 13.80300000000001);
    ctx.bezierCurveTo(11.82, 13.61300000000001, 11.554, 13.423000000000009, 11.288, 13.23300000000001);
    ctx.bezierCurveTo(11.288, 13.157000000000009, 11.288, 13.08100000000001, 11.288, 13.00500000000001);
    ctx.bezierCurveTo(11.212, 12.96700000000001, 11.136000000000001, 12.92900000000001, 11.06, 12.891000000000009);
    ctx.bezierCurveTo(11.06, 12.815000000000008, 11.06, 12.73900000000001, 11.06, 12.66300000000001);
    ctx.bezierCurveTo(11.022, 12.66300000000001, 10.984, 12.66300000000001, 10.946, 12.66300000000001);
    ctx.bezierCurveTo(10.87, 12.43500000000001, 10.794, 12.20700000000001, 10.718, 11.97900000000001);
    ctx.bezierCurveTo(10.68, 11.97900000000001, 10.642, 11.97900000000001, 10.604, 11.97900000000001);
    ctx.bezierCurveTo(10.604, 11.865000000000009, 10.604, 11.75100000000001, 10.604, 11.63700000000001);
    ctx.bezierCurveTo(10.489999999999998, 11.599000000000009, 10.376, 11.561000000000009, 10.261999999999999, 11.523000000000009);
    ctx.bezierCurveTo(10.299999999999999, 11.447000000000008, 10.338, 11.37100000000001, 10.376, 11.295000000000009);
    ctx.bezierCurveTo(10.299999999999999, 11.257000000000009, 10.224, 11.219000000000008, 10.148, 11.181000000000008);
    ctx.bezierCurveTo(10.148, 11.105000000000008, 10.148, 11.029000000000009, 10.148, 10.953000000000008);
    ctx.bezierCurveTo(10.11, 10.953000000000008, 10.072, 10.953000000000008, 10.033999999999999, 10.953000000000008);
    ctx.bezierCurveTo(9.749999999999998, 10.619000000000009, 9.267999999999999, 10.154000000000009, 8.78, 10.041000000000007);
    ctx.bezierCurveTo(8.78, 9.965000000000007, 8.78, 9.889000000000008, 8.78, 9.813000000000008);
    ctx.bezierCurveTo(8.665, 9.772, 8.551, 9.734, 8.437, 9.696);
    ctx.bezierCurveTo(8.437, 9.658, 8.437, 9.62, 8.437, 9.581999999999999);
    ctx.bezierCurveTo(8.277, 9.459999999999999, 7.997999999999999, 9.29, 7.866999999999999, 9.467999999999998);
    ctx.bezierCurveTo(7.866999999999999, 9.391999999999998, 7.866999999999999, 9.315999999999999, 7.866999999999999, 9.239999999999998);
    ctx.bezierCurveTo(7.411, 9.164, 6.955, 9.088, 6.499, 9.012);
    ctx.bezierCurveTo(6.499, 8.974, 6.499, 8.936, 6.499, 8.898);
    ctx.bezierCurveTo(6.271, 8.822, 6.042, 8.746, 5.814, 8.67);
    ctx.bezierCurveTo(5.814, 8.632, 5.814, 8.594, 5.814, 8.556);
    ctx.bezierCurveTo(5.207, 8.594, 4.599, 8.632, 3.99, 8.67);
    ctx.bezierCurveTo(3.99, 8.632, 3.99, 8.594, 3.99, 8.556);
    ctx.bezierCurveTo(3.602, 8.441, 3.248, 8.621, 2.964, 8.442);
    ctx.bezierCurveTo(2.888, 8.328, 2.813, 8.214, 2.736, 8.101);
    ctx.bezierCurveTo(2.66, 8.138, 2.584, 8.176, 2.508, 8.214);
    ctx.bezierCurveTo(2.508, 8.1, 2.508, 7.986000000000001, 2.508, 7.872000000000001);
    ctx.bezierCurveTo(2.356, 7.834, 2.204, 7.796, 2.052, 7.758);
    ctx.bezierCurveTo(2.014, 7.645, 1.976, 7.53, 1.938, 7.417);
    ctx.bezierCurveTo(1.976, 7.417, 2.014, 7.417, 2.052, 7.417);
    ctx.bezierCurveTo(2.052, 7.075, 2.052, 6.733, 2.052, 6.391);
    ctx.bezierCurveTo(2.0140000000000002, 6.391, 1.976, 6.391, 1.938, 6.391);
    ctx.bezierCurveTo(1.938, 6.315, 1.938, 6.239, 1.938, 6.163);
    ctx.bezierCurveTo(1.9, 6.163, 1.8619999999999999, 6.163, 1.8239999999999998, 6.163);
    ctx.bezierCurveTo(1.8239999999999998, 5.897, 1.8239999999999998, 5.631, 1.8239999999999998, 5.365);
    ctx.bezierCurveTo(1.513, 5.185, 1.545, 5.053, 1.026, 5.023);
    ctx.bezierCurveTo(1.026, 5.061, 1.026, 5.098999999999999, 1.026, 5.137);
    ctx.bezierCurveTo(0.95, 5.175, 0.874, 5.213, 0.798, 5.251);
    ctx.bezierCurveTo(0.798, 5.175000000000001, 0.798, 5.099, 0.798, 5.023000000000001);
    ctx.bezierCurveTo(0.569, 4.958, 0.7, 5.037, 0.57, 4.909);
    ctx.bezierCurveTo(0.608, 4.909, 0.6459999999999999, 4.909, 0.6839999999999999, 4.909);
    ctx.bezierCurveTo(0.6839999999999999, 4.795, 0.6839999999999999, 4.681, 0.6839999999999999, 4.567);
    ctx.bezierCurveTo(0.49399999999999994, 4.567, 0.30399999999999994, 4.567, 0.11399999999999999, 4.567);
    ctx.bezierCurveTo(0.076, 4.453, 0.038, 4.339, 0, 4.226);
    ctx.bezierCurveTo(0.038, 4.226, 0.076, 4.226, 0.114, 4.226);
    ctx.bezierCurveTo(0.114, 4.074, 0.114, 3.922, 0.114, 3.77);
    ctx.bezierCurveTo(0.228, 3.732, 0.342, 3.694, 0.456, 3.656);
    ctx.bezierCurveTo(0.67, 3.484, 0.76, 3.218, 0.798, 2.858);
    ctx.bezierCurveTo(0.988, 2.858, 1.178, 2.858, 1.3679999999999999, 2.858);
    ctx.bezierCurveTo(1.3679999999999999, 2.782, 1.3679999999999999, 2.706, 1.3679999999999999, 2.63);
    ctx.bezierCurveTo(1.482, 2.63, 1.5959999999999999, 2.63, 1.71, 2.63);
    ctx.bezierCurveTo(1.71, 2.554, 1.71, 2.4779999999999998, 1.71, 2.4019999999999997);
    ctx.bezierCurveTo(1.8679999999999999, 2.4309999999999996, 1.697, 2.417, 1.824, 2.5159999999999996);
    ctx.bezierCurveTo(1.976, 2.44, 2.128, 2.364, 2.28, 2.288);
    ctx.bezierCurveTo(2.28, 2.25, 2.28, 2.2119999999999997, 2.28, 2.174);
    ctx.bezierCurveTo(2.356, 2.174, 2.432, 2.174, 2.508, 2.174);
    ctx.bezierCurveTo(2.573, 1.896, 2.628, 1.923, 2.736, 1.718);
    ctx.bezierCurveTo(2.888, 1.832, 3.041, 1.946, 3.192, 2.06);
    ctx.bezierCurveTo(3.192, 2.098, 3.192, 2.136, 3.192, 2.174);
    ctx.bezierCurveTo(3.269, 2.136, 3.344, 2.098, 3.42, 2.06);
    ctx.bezierCurveTo(3.42, 2.136, 3.42, 2.212, 3.42, 2.2880000000000003);
    ctx.bezierCurveTo(3.551, 2.42, 3.728, 2.389, 3.99, 2.402);
    ctx.bezierCurveTo(3.99, 2.326, 3.99, 2.25, 3.99, 2.174);
    ctx.bezierCurveTo(4.12, 2.27, 4.007, 2.159, 4.104, 2.288);
    ctx.bezierCurveTo(4.5200000000000005, 2.694, 4.5520000000000005, 3.5309999999999997, 4.674, 4.226);
    ctx.bezierCurveTo(4.788, 4.264, 4.902, 4.302, 5.016, 4.34);
    ctx.bezierCurveTo(5.055, 4.453, 5.092, 4.567, 5.13, 4.681);
    ctx.bezierCurveTo(5.244, 4.643, 5.358, 4.605, 5.4719999999999995, 4.567);
    ctx.bezierCurveTo(5.481, 4.867, 5.515999999999999, 4.955, 5.585999999999999, 5.1370000000000005);
    ctx.bezierCurveTo(5.8149999999999995, 5.072, 5.909, 5.0520000000000005, 6.042, 4.909000000000001);
    ctx.bezierCurveTo(6.042, 4.833000000000001, 6.042, 4.757000000000001, 6.042, 4.681000000000001);
    ctx.bezierCurveTo(6.08, 4.681000000000001, 6.117999999999999, 4.681000000000001, 6.156, 4.681000000000001);
    ctx.bezierCurveTo(6.156, 4.719000000000001, 6.156, 4.757000000000001, 6.156, 4.795000000000001);
    ctx.bezierCurveTo(6.231999999999999, 4.757000000000001, 6.308, 4.719000000000001, 6.3839999999999995, 4.681000000000001);
    ctx.bezierCurveTo(6.3839999999999995, 4.719000000000001, 6.3839999999999995, 4.757000000000001, 6.3839999999999995, 4.795000000000001);
    ctx.bezierCurveTo(6.5089999999999995, 4.897000000000001, 6.4079999999999995, 4.775000000000001, 6.497999999999999, 4.909000000000001);
    ctx.bezierCurveTo(6.459999999999999, 4.909000000000001, 6.422, 4.909000000000001, 6.3839999999999995, 4.909000000000001);
    ctx.bezierCurveTo(6.273, 5.098, 6.549, 5.005, 6.613, 5.023);
    ctx.lineTo(6.727, 4.909);
    ctx.bezierCurveTo(6.765000000000001, 5.099, 6.803, 5.289, 6.841, 5.479);
    ctx.bezierCurveTo(6.955, 5.517, 7.069, 5.555, 7.183, 5.593);
    ctx.bezierCurveTo(7.183, 5.631, 7.183, 5.669, 7.183, 5.707);
    ctx.bezierCurveTo(7.322, 5.818, 7.404, 5.787, 7.5249999999999995, 5.935);
    ctx.bezierCurveTo(7.866999999999999, 5.973, 8.209, 6.010999999999999, 8.551, 6.0489999999999995);
    ctx.bezierCurveTo(8.589, 5.935, 8.627, 5.821, 8.665000000000001, 5.707);
    ctx.bezierCurveTo(8.936, 5.684, 8.947, 5.66, 9.121, 5.593);
    ctx.bezierCurveTo(9.011000000000001, 5.447, 8.871, 5.475, 8.779, 5.365);
    ctx.bezierCurveTo(8.779, 5.289000000000001, 8.779, 5.213, 8.779, 5.1370000000000005);
    ctx.bezierCurveTo(8.665, 5.099, 8.551, 5.061, 8.437, 5.023);
    ctx.bezierCurveTo(8.442, 4.58, 8.474, 4.454, 8.665, 4.226);
    ctx.bezierCurveTo(8.741, 4.188, 8.816999999999998, 4.15, 8.892999999999999, 4.112);
    ctx.bezierCurveTo(8.855, 3.998, 8.817, 3.883, 8.779, 3.77);
    ctx.bezierCurveTo(8.779, 3.77, 8.967, 3.622, 9.007, 3.542);
    ctx.bezierCurveTo(8.663, 3.463, 8.258, 2.789, 7.981, 3.085);
    ctx.bezierCurveTo(7.981, 3.009, 7.981, 2.933, 7.981, 2.8569999999999998);
    ctx.bezierCurveTo(7.796, 2.98, 7.92, 3.051, 7.867, 3.085);
    ctx.bezierCurveTo(7.795, 3.131, 7.627, 2.877, 7.411, 2.971);
    ctx.bezierCurveTo(7.335, 3.085, 7.259, 3.2, 7.183, 3.313);
    ctx.bezierCurveTo(7.02, 3.367, 7.021, 3.121, 6.955, 3.085);
    ctx.bezierCurveTo(6.8790000000000004, 3.085, 6.803, 3.085, 6.727, 3.085);
    ctx.bezierCurveTo(6.727, 3.047, 6.727, 3.009, 6.727, 2.971);
    ctx.bezierCurveTo(6.362, 2.781, 6.006, 2.7560000000000002, 5.473000000000001, 2.743);
    ctx.bezierCurveTo(5.473000000000001, 2.667, 5.473000000000001, 2.5909999999999997, 5.473000000000001, 2.5149999999999997);
    ctx.bezierCurveTo(5.549, 2.5149999999999997, 5.625000000000001, 2.5149999999999997, 5.7010000000000005, 2.5149999999999997);
    ctx.bezierCurveTo(5.793, 2.1479999999999997, 5.993, 2.1099999999999994, 6.157000000000001, 1.8309999999999995);
    ctx.bezierCurveTo(6.081000000000001, 1.8309999999999995, 6.005000000000001, 1.8309999999999995, 5.929000000000001, 1.8309999999999995);
    ctx.bezierCurveTo(5.883000000000001, 1.3729999999999996, 5.7970000000000015, 1.4189999999999996, 5.929000000000001, 1.0329999999999995);
    ctx.bezierCurveTo(6.004, 1.072, 6.081, 1.11, 6.157, 1.148);
    ctx.bezierCurveTo(6.195, 1.262, 6.232, 1.376, 6.271, 1.49);
    ctx.bezierCurveTo(6.3469999999999995, 1.49, 6.423, 1.49, 6.499, 1.49);
    ctx.bezierCurveTo(6.46, 1.566, 6.423, 1.642, 6.385, 1.718);
    ctx.bezierCurveTo(6.423, 1.718, 6.460999999999999, 1.718, 6.499, 1.718);
    ctx.bezierCurveTo(6.632, 1.873, 6.707, 1.892, 6.955, 1.946);
    ctx.bezierCurveTo(6.955, 1.8319999999999999, 6.955, 1.718, 6.955, 1.6039999999999999);
    ctx.bezierCurveTo(7.107, 1.6039999999999999, 7.259, 1.6039999999999999, 7.4110000000000005, 1.6039999999999999);
    ctx.bezierCurveTo(7.373, 1.49, 7.335, 1.376, 7.297, 1.262);
    ctx.bezierCurveTo(7.373, 1.3, 7.449, 1.338, 7.525, 1.376);
    ctx.bezierCurveTo(7.525, 1.3379999999999999, 7.525, 1.2999999999999998, 7.525, 1.2619999999999998);
    ctx.bezierCurveTo(7.563000000000001, 1.2619999999999998, 7.601, 1.2619999999999998, 7.639, 1.2619999999999998);
    ctx.bezierCurveTo(7.601, 1.0719999999999998, 7.563000000000001, 0.8819999999999998, 7.525, 0.6919999999999998);
    ctx.bezierCurveTo(7.563000000000001, 0.6919999999999998, 7.601, 0.6919999999999998, 7.639, 0.6919999999999998);
    ctx.bezierCurveTo(7.769, 0.5619999999999998, 7.639, 0.6469999999999998, 7.867, 0.5779999999999998);
    ctx.bezierCurveTo(7.867, 0.5019999999999999, 7.867, 0.4259999999999998, 7.867, 0.34999999999999987);
    ctx.bezierCurveTo(8.358, 0.48099999999999987, 8.256, 0.32099999999999984, 8.665, 0.12199999999999986);
    ctx.bezierCurveTo(8.665, 0.08399999999999985, 8.665, 0.04599999999999986, 8.665, 0.007999999999999854);
    ctx.bezierCurveTo(8.827, -0.04900000000000015, 8.828999999999999, 0.21099999999999985, 8.892999999999999, 0.23599999999999988);
    ctx.bezierCurveTo(9.26, 0.383, 9.427, 0.259, 9.691, 0.351);
    ctx.bezierCurveTo(9.833, 0.7629999999999999, 9.678, 0.997, 9.805000000000001, 1.376);
    ctx.bezierCurveTo(10.909000000000002, 0.9259999999999999, 11.771, 1.458, 12.769000000000002, 1.718);
    ctx.bezierCurveTo(12.906000000000002, 1.4689999999999999, 13.020000000000001, 1.343, 13.339000000000002, 1.262);
    ctx.bezierCurveTo(13.339000000000002, 1.3, 13.339000000000002, 1.338, 13.339000000000002, 1.3760000000000001);
    ctx.bezierCurveTo(13.491000000000001, 1.3760000000000001, 13.643000000000002, 1.3760000000000001, 13.795000000000002, 1.3760000000000001);
    ctx.bezierCurveTo(13.795000000000002, 1.4140000000000001, 13.795000000000002, 1.4520000000000002, 13.795000000000002, 1.4900000000000002);
    ctx.bezierCurveTo(14.232, 1.7, 14.57, 1.656, 14.708, 2.174);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    ctx.restore();
    ctx.restore();
}

function paintLake() {

    // If the shape is clicked, display a fact
    // and paint the lake.
    // Display a fact.
    alert("Lake Michigan is one of the five Great Lakes of America.");

    // Fill the lake with blue.
    ctx.fillStyle = "blue";
    ctx.fill();
    ctx.scale(200, 200);
}

function makeLake() {

    // These methods draw the shape of the lake.

}
function zoom(){
 ctx.clearRect(0,0,canvas.width,canvas.height);
 ctx.scale(3,3);
 draw(ctx);
}

<body onload="init()">
 <h1>
  Lake Michigan
 </h1>
 <button onclick='zoom()'>zoom</button>
 <canvas id="canvas" width="250" height="250" onclick="paintLake()">
 </canvas>
 <p>
    Click on the lake to learn a fact about Lake Michigan.
 </p>
</body>

Use ctx.scale(x,y) to zoom canvas.


来源: stackexchange

问:
Transaction Management for Shared DB in Microservices
I have 2 Microservices that using same DB

First Microserivce for Balance Management .

Second Microserivce for Reservation Management.

And I have the following business scenario:

Need to check if the client have balance by calling REST Services from (Balance Management Microservice).

If he have balance , then I have to call another REST Services to reserved the balance from (Balance Management Microservice ) .

Then I have to do some kind of airline reservation also by calling another REST Service from (Reservation Management).

So the question is how to rollback the step 2 if the step 3 fail by using Transaction Management between REST Services by taking care that all Microservice using same DB

答:
A transaction is a unit of work which either is %100 successful or %0 successful. The transaction is managed and implemented by the database, not your application. That is why you can scale out an application (create more instances) and your data remains consistent.

Likewise many different applications can talk to the same database, this doesn't matter. Say you are transferring money, which corresponds to 2 rows in a database being updated in the same transaction. Lets say you do it incorrect and create 2 transactions instead to update each row individually. Whether you are running 1 or many applications or instances doesn't matter, if you did this incorrect in 2 transactions then you would risk having inconsistent data, say if another transaction debited an account and there wasn't enough money anymore in-between your transactions, then you might get an account with less than 0 dollars, not good not good.

On another note this has a cost. Transactions are expensive, they take more time, and updates to a row will occur sequentially not at the same time, which is why systems which need to scale to extreme performance sometimes use append only databases / NoSQL and rely on eventual consistency instead.

ContentLicense: CC BY-SA 3.0


问:
Backspace is not clearing the field in mozilla browser
I have the input box which allows only numeric.In chrome and firefox it allows only numeric but can't delete the number in using backspace in mozilla.

$(document).ready(function () {
$('#price').keypress(function(event) {
  if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
   event.preventDefault();
  }
 });
});```
<pre class="snippet-code-html lang-html prettyprint-override"><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='price'></code>```

答:
keypress event not working in firefox. you can use keyup or keydown event it will work.

```<code>$(document).ready(function () {
$('#price').keyup(function(event) {
        if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57) && event.which != 8) {
            event.preventDefault();
        }
    });
});
</code>```

Body:
I have the input box which allows only numeric.In chrome and firefox it allows only numeric but can't delete the number in using backspace in mozilla.

$(document).ready(function () {
$('#price').keypress(function(event) {
  if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
   event.preventDefault();
  }
 });
});

<input type='text' id='price'>

Body:
keypress event not working in firefox. you can use keyup or keydown event it will work.

$(document).ready(function () {
$('#price').keyup(function(event) {
        if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57) && event.which != 8) {
            event.preventDefault();
        }
    });
});


问:
Check for username while typing in field?
I am fluent with HTML, and mostly PHP.

I can do the scanning part with PHP.. I'm just not sure how to call a function in PHP with JavaScript, because I don't know JavaScript.

My PHP code will connect to my MySQL database and see if the text currently in the textbox (Not clicked enter yet, still typing) is in the database..

Do you know how to do this, or at least know a link that tells you how to do it?

答: This sounds like a problem for jQuery. I'd give you a long-winded example, but there are many people that would give you a much better one: like this guy.</p>

ContentLicense: CC BY-SA 2.5


问:
App crash using Realm Swift
I have send my app for test, and with crashlytics i found crash log.
I don't know what i can tell about my app, it simple table view that populate data from Realm, thats simply as that. Please look at crash log:

```<code>Fatal Exception: Invalid value
0  CoreFoundation                 0x188efafd8 __exceptionPreprocess
1  libobjc.A.dylib                0x18795c538 objc_exception_throw
2  Realm                          0x1006ba570 RLMPrecondition(bool, NSString*, NSString*, ...) (RLMQueryUtil.mm:67)
3  Realm                          0x1007026b8 (anonymous namespace)::validate_property_value((anonymous namespace)::ColumnReference const&, objc_object*, NSString*, RLMObjectSchema*, NSString*) (RLMQueryUtil.mm:1071)
4  Realm                          0x1006bca28 (anonymous namespace)::QueryBuilder::apply_value_expression(RLMObjectSchema*, NSString*, objc_object*, NSComparisonPredicate*) (RLMQueryUtil.mm:1250)
5  Realm                          0x1006bb0d0 (anonymous namespace)::QueryBuilder::apply_predicate(NSPredicate*, RLMObjectSchema*) (RLMQueryUtil.mm:1452)
6  Realm                          0x1006ba62c RLMPredicateToQuery(NSPredicate*, RLMObjectSchema*, RLMSchema*, realm::Group&) (RLMQueryUtil.mm:504)
7  Realm                          0x10071c7f8 -[RLMResults objectsWithPredicate:] (RLMResults.mm:329)
8  RealmSwift                     0x100cf4c28 specialized Results.filter(String, [Any]...) -> Results<A> (Results.swift:208)
9  RealmSwift                     0x100cf212c Results.filter(String, [Any]...) -> Results<A> (Results.swift)
10 MyApp                          0x1000fbffc specialized ProductViewModel.init(m : Any, loginText : String, onAccountString : String, comissionString : String, fromClientString : String, commentString : String, amountVal : String, status : ProductResultItem.ResultStatus, errorTxt : String?, transId : Int?, shouldHideBackBtn : Bool, shouldAddModel : Bool, shouldModifyOperationWithId : Bool) -> ProductViewModel (ProductViewModel.swift:82)
11 MyApp                          0x1000da934 specialized ProductViewController.(simpleBtnCellTapped(type : SimpleBtnItem.ButtonType) -> ()).(closure #2) (ProductViewController.swift:249)
12 MyApp                          0x1000dcc4c partial apply for ProductViewController.(enterBtnLongTapEnteredText(enteredTxt : String) -> ()).(closure #1)
13 MyApp                          0x1000f5e74 ProductViewModel.(proceedTransfer(transactionResult : (ProductResultItem.ResultStatus, String?, Int?) -> ()) -> ()).(closure #1) empty-list Bool (ProductViewModel.swift:433)
14 MyApp                          0x1000e2388 ApiManager.(createOperation(parameters : [String : Any], complete : (Bool, String?) -> ()) -> ()).(closure #1) (ApiManager.swift:207)
15 Alamofire                      0x10037b944 specialized DataRequest.(response<A where ...> (queue : DispatchQueue?, responseSerializer : A, completionHandler : (DataResponse<A.SerializedObject>) -> ()) -> Self).(closure #1).(closure #1) (ResponseSerialization.swift:167)
16 Alamofire                      0x10035f5f4 thunk (NetworkReachabilityManager.swift)
17 libdispatch.dylib              0x187db29e0 _dispatch_call_block_and_release
18 libdispatch.dylib              0x187db29a0 _dispatch_client_callout
19 libdispatch.dylib              0x187db75e8 _dispatch_main_queue_callback_4CF
20 CoreFoundation                 0x188ea90c0 __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
21 CoreFoundation                 0x188ea6cdc __CFRunLoopRun
22 CoreFoundation                 0x188dd6d94 CFRunLoopRunSpecific
23 GraphicsServices               0x18a840074 GSEventRunModal
24 UIKit                          0x18f08f130 UIApplicationMain
25 MyApp                          0x1000668b8 main (AppDelegate.swift:18)
26 libdyld.dylib                  0x187de559c start
</code>```

Where i suppose to find what cause that error?

答:
Errors raised from within Realm's validate_property_value method indicate that a value that's being compared in a predicate is not of a type that is compatible with the property it is being compared with.

The exception's message, which is typically included in the crash log, should tell you precisely which property and and object are the problem. If you don't have that information, you should take a close look at the code performing the querying (ProductViewModel.init) and see if you can determine where the inappropriate object type is coming from.

Title: App crash using Realm Swift

Body:
I have send my app for test, and with crashlytics i found crash log.
I don't know what i can tell about my app, it simple table view that populate data from Realm, thats simply as that. Please look at crash log:

Fatal Exception: Invalid value
0  CoreFoundation                 0x188efafd8 __exceptionPreprocess
1  libobjc.A.dylib                0x18795c538 objc_exception_throw
2  Realm                          0x1006ba570 RLMPrecondition(bool, NSString*, NSString*, ...) (RLMQueryUtil.mm:67)
3  Realm                          0x1007026b8 (anonymous namespace)::validate_property_value((anonymous namespace)::ColumnReference const&, objc_object*, NSString*, RLMObjectSchema*, NSString*) (RLMQueryUtil.mm:1071)
4  Realm                          0x1006bca28 (anonymous namespace)::QueryBuilder::apply_value_expression(RLMObjectSchema*, NSString*, objc_object*, NSComparisonPredicate*) (RLMQueryUtil.mm:1250)
5  Realm                          0x1006bb0d0 (anonymous namespace)::QueryBuilder::apply_predicate(NSPredicate*, RLMObjectSchema*) (RLMQueryUtil.mm:1452)
6  Realm                          0x1006ba62c RLMPredicateToQuery(NSPredicate*, RLMObjectSchema*, RLMSchema*, realm::Group&) (RLMQueryUtil.mm:504)
7  Realm                          0x10071c7f8 -[RLMResults objectsWithPredicate:] (RLMResults.mm:329)
8  RealmSwift                     0x100cf4c28 specialized Results.filter(String, [Any]...) -> Results (Results.swift:208)
9  RealmSwift                     0x100cf212c Results.filter(String, [Any]...) -> Results (Results.swift)
10 MyApp                          0x1000fbffc specialized ProductViewModel.init(m : Any, loginText : String, onAccountString : String, comissionString : String, fromClientString : String, commentString : String, amountVal : String, status : ProductResultItem.ResultStatus, errorTxt : String?, transId : Int?, shouldHideBackBtn : Bool, shouldAddModel : Bool, shouldModifyOperationWithId : Bool) -> ProductViewModel (ProductViewModel.swift:82)
11 MyApp                          0x1000da934 specialized ProductViewController.(simpleBtnCellTapped(type : SimpleBtnItem.ButtonType) -> ()).(closure #2) (ProductViewController.swift:249)
12 MyApp                          0x1000dcc4c partial apply for ProductViewController.(enterBtnLongTapEnteredText(enteredTxt : String) -> ()).(closure #1)
13 MyApp                          0x1000f5e74 ProductViewModel.(proceedTransfer(transactionResult : (ProductResultItem.ResultStatus, String?, Int?) -> ()) -> ()).(closure #1) empty-list Bool (ProductViewModel.swift:433)
14 MyApp                          0x1000e2388 ApiManager.(createOperation(parameters : [String : Any], complete : (Bool, String?) -> ()) -> ()).(closure #1) (ApiManager.swift:207)
15 Alamofire                      0x10037b944 specialized DataRequest.(response (queue : DispatchQueue?, responseSerializer : A, completionHandler : (DataResponse) -> ()) -> Self).(closure #1).(closure #1) (ResponseSerialization.swift:167)
16 Alamofire                      0x10035f5f4 thunk (NetworkReachabilityManager.swift)
17 libdispatch.dylib              0x187db29e0 _dispatch_call_block_and_release
18 libdispatch.dylib              0x187db29a0 _dispatch_client_callout
19 libdispatch.dylib              0x187db75e8 _dispatch_main_queue_callback_4CF
20 CoreFoundation                 0x188ea90c0 __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
21 CoreFoundation                 0x188ea6cdc __CFRunLoopRun
22 CoreFoundation                 0x188dd6d94 CFRunLoopRunSpecific
23 GraphicsServices               0x18a840074 GSEventRunModal
24 UIKit                          0x18f08f130 UIApplicationMain
25 MyApp                          0x1000668b8 main (AppDelegate.swift:18)
26 libdyld.dylib                  0x187de559c start

Where i suppose to find what cause that error?


问:
How to generate random numbers with specific probabilities in python?
For example,

Try to generate a list of 1000 random numbers with only 0 and 1.

s.t.

0 has the prob of 40%

1 has the prob of 60%

thanks!

答:
myProb = []

```<code>for i in range(1000):
#creates one number out of 0 or 1 with prob p 0.4 for 0 and 0.6 for 1
    test = numpy.random.choice(numpy.arange(0, 2), p=[0.4, 0.6])
    myProb.append(test)
</code>```

print(myProb)

Body:
myProb = []

for i in range(1000):
#creates one number out of 0 or 1 with prob p 0.4 for 0 and 0.6 for 1
    test = numpy.random.choice(numpy.arange(0, 2), p=[0.4, 0.6])
    myProb.append(test)

print(myProb)


问:
How to make list from two or more arrays in C# using LinQ?
I have two string say cityIds and cityNames.

```<code>cityIds="1,2,3"
cityNames="Pune,Mumbai,Surat"
</code>```

I have one class say City.cs

```<code>public class City
{
    public int CityId { get; set; }
    public string CityName { get; set; }
}
</code>```

From cityIds and cityNames I want to create List.

So if I have Input like this

```<code>cityIds="1,2,3"
cityNames="Pune,Mumbai,Surat"
</code>```

I want output like this

```<code>list[0]=CityId=1,CityName="Pune"
list[1]=CityId=2,CityName="Mumbai"
list[2]=CityId=3,CityName="Surat"
</code>```

I tried this

```<code>var listOfIds = cityIds.Split(',');
var listOfNames = cityNames.Split(',');
for(int i = 0; i < listOfIds.Count; i++)
{
     listOfDealerCities.Add(new City()
     {
          CityId = Int32.Parse(listOfIds[i]),
          CityName = listOfNames[i]
     });
}
</code>```

Is there any better way to do this like using LINQ?

答:
```<code>List<City> listOfDealerCities = listOfIds.Select<string, City>(
(t, i) => new City()
{
    CityId = Int32.Parse(t),
    CityName = listOfNames[i]
})
.ToList();
</code>```

Body:
I have two string say cityIds and cityNames.

cityIds="1,2,3"
cityNames="Pune,Mumbai,Surat"

I have one class say City.cs

public class City
{
    public int CityId { get; set; }
    public string CityName { get; set; }
}

From cityIds and cityNames I want to create List.

So if I have Input like this

cityIds="1,2,3"
cityNames="Pune,Mumbai,Surat"

I want output like this

list[0]=CityId=1,CityName="Pune"
list[1]=CityId=2,CityName="Mumbai"
list[2]=CityId=3,CityName="Surat"

I tried this

var listOfIds = cityIds.Split(',');
var listOfNames = cityNames.Split(',');
for(int i = 0; i < listOfIds.Count; i++)
{
     listOfDealerCities.Add(new City()
     {
          CityId = Int32.Parse(listOfIds[i]),
          CityName = listOfNames[i]
     });
}

Is there any better way to do this like using LINQ?