triangle

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(75, 0)
$.lineTo(0, 150)
$.lineTo(150, 150)
$.closePath()
$.lineWidth = 2
$.strokeStyle = 'rgba(0,0,0,.6)'
$.stroke()

// заполненный треугольник
$.beginPath()
$.moveTo(100, 25)
$.lineTo(25, 175)
$.lineTo(175, 175)
$.closePath()
$.fillStyle = 'rgba(255, 0, 0, .6)'
$.fill()

$.beginPath()
$.moveTo(125, 50)
$.lineTo(50, 200)
$.lineTo(200, 200)
$.closePath()
$.fillStyle = 'rgba(255, 0, 255, .6)'
$.fill()

$.beginPath()
$.moveTo(150, 75)
$.lineTo(75, 225)
$.lineTo(225, 225)
$.closePath()
$.fillStyle = 'rgba(0, 0, 255, .6)'
$.fill()

$.beginPath()
$.moveTo(175, 100)
$.lineTo(100, 250)
$.lineTo(250, 250)
$.closePath()
$.fillStyle = 'rgba(0, 255, 255, .6)'
$.fill()

$.beginPath()
$.moveTo(200, 125)
$.lineTo(125, 275)
$.lineTo(275, 275)
$.closePath()
$.fillStyle = 'rgba(0, 255, 0, .6)'
$.fill()

$.beginPath()
$.moveTo(225, 150)
$.lineTo(150, 300)
$.lineTo(300, 300)
$.closePath()
$.fillStyle = 'rgba(255, 255, 0, .6)'
$.fill()