HTML5 Course by a Famed best HTML5 Course courses in Delhi & HTML5 Course Training Courses Institute in Delhi

Coding of this example

<canvas id="canvas9" width="300" height="350">
</canvas>
<script>
canvas = document.getElementById("canvas9");
ctx = canvas9.getContext("2d")
ctx.lineWidth = 8;
ctx.strokeStyle = "#333";
ctx.beginPath();
ctx.moveTo(158, 85);
ctx.bezierCurveTo(294, 357, 58, 321, 223, 83);
ctx.stroke();
</script>

Coding of this example

<canvas id="canvas8" width="300" height="350">
</canvas>
<script>
document.getElementById("canvas8");
ctx = canvas8.getContext("2d")
ctx.lineWidth = 6;
ctx.strokeStyle = "#333"
ctx.beginPath();
ctx.moveTo(248, 66);
ctx.bezierCurveTo(18, 168, 398, 250, 162, 337);
ctx.stroke();
</script>

Coding of this example

<canvas id="myCanvas" width="578" height="600">
</canvas> <script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(0, 273.5);
context.bezierCurveTo(7.3, 252, 39, 185, 126, 204.3);
context.bezierCurveTo(124, 108, 147, 58, 204, 0);
context.bezierCurveTo(261, 58, 285, 108, 283.7, 204.3);
context.bezierCurveTo(370.3, 185.7, 403, 261, 407, 273);
context.bezierCurveTo(387.3, 324, 334, 434, 207, 412.2);
context.bezierCurveTo(205, 454, 199, 507, 185, 594);
context.bezierCurveTo(178, 568, 137, 563, 160, 538);
context.bezierCurveTo(175, 522.5, 185, 465, 187, 413);
context.bezierCurveTo(71.5, 427, 19.5, 322.5, 0, 273);
context.lineWidth = 10;
// line color context.strokeStyle = 'black';
context.stroke();
</script>

Coding of this example

<canvas id="myCanvas3" width="578" height="700">
</canvas>
<script>
var canvas = document.getElementById('myCanvas3');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(148, 432.5);
context.bezierCurveTo(143, 397, 156, 372, 168.5, 312);
context.bezierCurveTo(181, 251, 300, 234, 300, 234);
context.bezierCurveTo(307, 234, 372, 234, 412, 275);
context.bezierCurveTo(451, 312, 429.7, 459, 424, 463);
context.bezierCurveTo(419, 471, 426, 492, 426, 492);
context.bezierCurveTo(426, 492, 413.6, 517.8, 411.2, 535.6);
context.bezierCurveTo(408.6, 553.8, 389.6, 553.8, 380, 553);
context.bezierCurveTo(372, 554, 371, 565, 372, 583);
context.bezierCurveTo(373, 600, 369.4, 615, 368, 624);
context.bezierCurveTo(367, 633, 354, 635, 345, 633);
context.bezierCurveTo(343, 640, 328.5, 637.2, 314, 637);
context.bezierCurveTo(307.6, 648.6, 292, 641.2, 285, 641);
context.bezierCurveTo(277, 648, 260, 639, 260, 639);
context.bezierCurveTo(260, 639, 253, 640, 248, 642);
context.bezierCurveTo(244, 644, 237.2, 639, 237.2, 639);
context.bezierCurveTo(237.2, 639, 223, 626, 218, 622);
context.bezierCurveTo(212, 619.8, 215, 612, 215, 612);
context.bezierCurveTo(215, 612, 213, 595, 219, 595);
context.bezierCurveTo(221, 588.8, 219.5, 577, 218, 569);
context.bezierCurveTo(217, 562, 190, 565, 190, 565);
context.bezierCurveTo(190, 565, 177, 562, 177.7, 554.8);
context.bezierCurveTo(178, 547, 172, 531, 169, 528.5);
context.bezierCurveTo(166.5, 525, 168, 522, 166, 514);
context.bezierCurveTo(163, 506, 170, 488.2, 170, 488.2);
context.bezierCurveTo(170, 488.2, 157.8, 469, 148, 432.5);
context.lineWidth = 3;
// line color
context.strokeStyle = 'black';
context.stroke();
context.moveTo(190.5, 498.5);
context.bezierCurveTo(190.5, 498.5, 192, 477, 203.3, 470.2);
context.bezierCurveTo(203.3, 470.2, 228, 442, 236, 444.5);
context.bezierCurveTo(245, 446, 261, 447, 261, 447);
context.bezierCurveTo(261, 447, 278, 456, 270, 471.5);
context.bezierCurveTo(261.2, 487, 252, 499, 251, 508);
context.bezierCurveTo(250, 517, 237, 540, 219, 532);
context.bezierCurveTo(201, 525, 194.8, 532, 190, 498);
context.lineWidth = 2;
// line color context.strokeStyle = 'black';
context.stroke();
context.moveTo(315.5, 470.5);
context.bezierCurveTo(308.5, 441, 347, 444.5, 347, 444.5);
context.bezierCurveTo(347, 444.5, 377.5, 448, 395, 490.5);
context.bezierCurveTo(398, 537.5, 365, 533, 354, 530.8);
context.bezierCurveTo(342.8, 528, 335.5, 504, 335.5, 504);
context.bezierCurveTo(329, 485.5, 329, 485.5 , 315.8, 470.5);
context.bezierCurveTo(315.5, 471, 308, 441.5 , 315, 470.5);
context.lineWidth = 2;
// line color
context.strokeStyle = 'black';
context.stroke();
context.moveTo(295, 498);
context.bezierCurveTo(326, 534, 318, 541 , 325, 552.5);
context.bezierCurveTo(333, 564, 311.5, 577.3 , 305, 565.5);
context.bezierCurveTo(297, 553, 289, 565 , 282, 563);
context.bezierCurveTo(265, 539, 295, 498, 295, 498);
context.lineWidth = 2;
// line color
context.strokeStyle = 'black';
context.stroke();