Best HTML5 Canvas Line Tutorials with Examples

 Courses / Web Development /HTML5 Tutorials
Welcome to the world of design in HTML5 Canvas Line

HTML5 has a feature of rectangle. There are two types of gradient in HTML5. one is linear and second is radial. we can fill any object with these gradients. So we have not to insert a image and file size can be reduced.

Some examples of Canvas Line

1. First Example of Canvas Line

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>

2.Second Example of Canvas Bazier Curve

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>


3.Third Example of Canvas Bezier Curve

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>


4.Fourth Example of Canvas Bezier Curve

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();

HTML5 canvas line Courses in Delhi