HTML reference manual

Complete list of HTML tags

HTML canvas lineTo() method

The lineTo() method is a method used in the Canvas 2D API to connect the end of a subpath to x, y coordinates (it does not actually draw).

دليل مرجع HTML5 canvas

Online example

Start a path, move to position 0,0. Create a line to position 300,150:

مثال

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>استخدام طريقة lineTo() في HTML canvas - دليل الأساسيات (oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
متصفحك لا يدعم علامة <canvas> من HTML5.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
</script>
</body>
</html>

الاختبار راجع <‹/›

Browser compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support lineTo() Method.

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Definition and usage

The lineTo() method adds a new point and then creates a line from that point to the last specified point on the canvas (this method does not create a line).

Hint:Please use stroke() Method to draw an exact path on the canvas.

JavaScript syntax:	context.lineTo(x,y);

Parameter value

Parameter	Description
x	The x coordinate of the target position of the path.
y	The y coordinate of the target position of the path.

Online example

Draw a path, the shape is the letter L:

مثال

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>استخدام طريقة lineTo() في HTML canvas - دليل الأساسيات (oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
متصفحك لا يدعم علامة <canvas> من HTML5.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.stroke();
</script>
</body>
</html>

الاختبار راجع <‹/›

دليل مرجع HTML5 canvas

HTML: <template> الصفحة