html5 - Draw and plot Square dynamically Using HTML canvas -

i need draw diagram given below using html canvas.can me.

first access canvas:

var can=document.getelementbyid('canvas1')

now need context perform drawing functions:

var pen=can.getcontext('2d')

to draw line following:

pen.beginpath() pen.moveto(0,0) pen.lineto(50,50) pen.closepath() pen.strokestyle=rgb(255,0,0) pen.stroke()

to fill path (like triangle) following:

pen.beginpath() pen.moveto(0,0) pen.lineto(50,50) pen.lineto(0,50) pen.closepath() pen.fillstyle=rgb(255,0,0) pen.fill()

Breidenthal