<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
HTML canvas beginPath() Property
</
title
>
</
head
>
<
body
style
=
"text-align:center;"
>
<
h1
style
=
"color:green;"
>
GeeksforGeeks
</
h1
>
<
h2
>HTML canvas beginPath() Property</
h2
>
<
canvas
id
=
"GFG"
width
=
"500"
height
=
"300"
></
canvas
>
<
script
>
var GFG = document.getElementById("GFG");
var context = GFG.getContext("2d");
// Set the path width
context.lineWidth = 5;
// Create path
context.beginPath();
context.moveTo(100, 20);
context.lineTo(230, 200);
// Set path color
context.strokeStyle = 'green';
context.stroke();
// Create another path
context.beginPath();
context.moveTo(230, 200);
context.quadraticCurveTo(230, 200, 260, 100);
// Set path color
context.strokeStyle = 'blue';
context.stroke();
// Create another path
context.beginPath();
context.moveTo(260, 100);
context.bezierCurveTo(290, -40, 300, 190, 400, 150);
// Set path color
context.strokeStyle = 'orange';
context.stroke();
context.closePath();
</
script
>
</
body
>
</
html
>