canvas draw by path

by louis0420

HTML

<canvas id="draw-path" width='400' height="400" style="background-color:rgba(10,39,210,0.5);"></canvas>

JavaScript

const canvas = document.getElementById('draw-path')
const ctx = canvas.getContext('2d')

const drawPath = () => {
  ctx.beginPath()
  ctx.moveTo(75, 50);
  ctx.lineTo(75, 100);
  ctx.lineTo(100, 100);
  ctx.lineTo(100, 50);
  ctx.fill();
}

const drawText = () => {
  ctx.font = "20pt Arial";
  ctx.fillText("Sample String", 200, 50);
}

const renderCanvas = () => {
  drawPath();
  drawText();
}

window.onload = renderCanvas