В браузерах в место линии, рисуется прямоугольник, html +js, почему?

Question

[Артем Петров]

Написал код в блокноте, сохранил. Ожидаю от него линию в браузер ах, а он рисует прямоугольник.Не могу понять почему?

<canvas id="canvasld"
width="300" height="100"
style="border:1px solid blue;" ></canvas>

//Обращение к canvas
var canvas=document. getElementByld("canvasld") ;
var ctx=canvas. getContext("2d");//Обращение к контексту
ctx. moveTo (50,70);//Перемещение курсора
ctx. lineTo(100,50);//Создание линии
ctx. stroke() ;//Отображение линии

Comments

[IvanU7n]

1. причём тут canvas и js?
2. указанный код как раз и должен рисовать прямоугольник

[Александр]

Не отображается линия на канвасе, или мешает его обводка?

Answer 1

[Deita]

width="300" height="100"
style="border:1px solid blue;" >

Очевидно же что вы указываете 300 на 100 а не 300 на 1

и на Canvas кстати используется LineTo

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// Start a new Path
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 150);

// Draw the Path
ctx.stroke();

Подробнее тут: https://www.w3schools.com/jsref/canvas_lineto.asp

Нажми меня, синий стиль рамки вы указываете для холста, а линия должна быть внутри

Comments

[Александр]

В исходнике вопроса есть код связанный с канвасом, просто корреткно надо вставлять этот исходник на сайт.

[Deita]

Александр, ааа ясно

[Артем Петров]

width="300" height="100"
style="border:1px solid blue ;" >

[Deita]

Артем Петров, вам следует для начала понять, как на этом сайте вставляется код, через специальный тег code. Или пользоваться такими сайтами как https://codepen.io/

[Артем Петров]

Спасибо, понял, там просто опечатка в букве I с l перепутаны, все получилось

[maksam07]

Ничего не ясно, но очень интересно.

[Deita]

maksam07, символы "палочки" 1 l I визуально похожие, просто не те символы гдето стояли, на тостере или на codepen шрифт другой у кода, это и помогло заметить видимо