<canvas id="can" width="1200px" height="600px"></canvas>
let can = document.getElementById('can')
let c = can.getContext('2d')
c.strokeStyle = '#FF0000';
c.lineWidth = '5'
c.moveTo(10, 10)
c.lineTo(100, 10)
c.moveTo(20, 30)
c.lineTo(90, 30)
c.moveTo(10, 50)
c.lineTo(100, 50)
c.moveTo(55, 10)
c.lineTo(55, 50)
c.stroke()
c.beginPath()
c.moveTo(70, 70)
c.lineTo(200, 300)
c.lineTo(350, 70)
c.lineTo(70, 70)
c.strokeStyle='yellow'
c.fillStyle = 'blue'
c.lineWidth = '5'
c.fill()
c.closePath()
c.stroke()
c.rect(300,300,300,150)
c.fillStyle='yellow'
c.fillRect(300,300,300,150)
c.strokeStyle='pink'
c.lineWidth='5'
c.strokeRect(300,300,300,150)
c.clearRect(350,320,100,100)
c.stroke()
c.beginPath()
c.arc(150,150,100,0,Math.PI*3/2,true)
c.fillStyle='red'
c.fill()
c.closePath()