line

by aio350

HTML

<canvas width="300" height="300" style="border: 1px dotted #222"></canvas>

CSS

body {
  margin: 0;
  height: 100vh;
  background: radial-gradient(circle, skyblue, steelblue);
  display: flex;
  justify-content: center;
  align-items: center;
}

JavaScript

const canvas = document.querySelector('canvas')
const $ = canvas.getContext('2d')

// начать рисование (открыть путь)
$.beginPath()
// переместить к
$.moveTo(50, 50)
// провести линию к
$.lineTo(250, 50)
$.lineTo(50, 250)
$.lineTo(250, 250)
// закончить рисование (закрыть путь)
$.closePath()
// толщина линии
$.lineWidth = 4
// цвет линии
$.strokeStyle = 'red'
// нарисовать линию
$.stroke()