<title>example_fig</title>

<table width=500><tr><td align=center><b>The circle inscribed in the triangle PQR
</b></td></tr></table>

<canvas width="600" height="390"></canvas>
<script>

xP=-3; yP=2; xQ=7.5; yQ=5; xR=2; yR=7.5
xC=2.4375567; yC=5.3761405; R=1.7524282
PQ=Math.sqrt((xQ-xP)*(xQ-xP)+(yQ-yP)*(yQ-yP))
xS=xC+(yQ-yP)*R/PQ; yS=yC+(xP-xQ)*R/PQ


Width=500; Height=390         // <-- dim of image (change if you want)
sX=0.5; sY=0.5                               // left and down space: you can change
aX = -3.5; bX = 8; aY = -1/2; bY = 8
minX = aX-sX; maxX = bX; minY = aY-sY; maxY = bY

Dx=0.5; nx=23; Dy=0.5; ny=17

Mx=Width/(maxX-minX)
My=Mx          // per un sistema monometrico prendi / for the same scale take  My=Mx
B=(0-minX)*Width/(maxX-minX); H=(maxY-0)*Height/(maxY-minY)
function X(a) {return B+a*Mx}; function Y(b) {return H-b*My}

let cx = document.querySelector("canvas").getContext("2d");

cx.beginPath(); cx.lineWidth=1; cx.strokeStyle="grey"          /// grid
for (i=0; i<=nx; i++) { x =  aX+Dx*i; cx.moveTo( X(x), Y(aY) ); cx.lineTo( X(x), Y(bY) ) }
for (i=0; i<=ny; i++) { y =  aY+Dy*i; cx.moveTo( X(aX), Y(y) ); cx.lineTo( X(bX), Y(y) ) }
cx.stroke()
cx.beginPath(); cx.lineWidth=3; cx.strokeStyle="brown"          /// axes
cx.moveTo( X(aX), Y(0) ); cx.lineTo( X(bX), Y(0) )
cx.moveTo( X(0), Y(aY) ); cx.lineTo( X(0), Y(bY) )
cx.stroke()

cx.beginPath(); cx.lineWidth=3; cx.strokeStyle="green"
 cx.arc( X(xC), Y(yC), R*Mx, 0, 2*Math.PI);
cx.stroke()

cx.beginPath(); cx.lineWidth=1; cx.strokeStyle="red"
 cx.moveTo(X(xP), Y(yP)); cx.lineTo(X(xC), Y(yC)); cx.lineTo(X(xQ), Y(yQ)); cx.lineTo(X(xC), Y(yC))
 cx.lineTo(X(xR), Y(yR))
cx.stroke()

cx.beginPath(); cx.lineWidth=1; cx.strokeStyle="red"
 cx.strokeRect( X(xP)-3,Y(yP)-3, 6,6 ); cx.strokeRect( X(xQ)-3,Y(yQ)-3, 6,6 ); cx.strokeRect( X(xR)-3,Y(yR)-3, 6,6 )
 cx.strokeRect( X(xC)-3,Y(yC)-3, 6,6 ); cx.strokeRect( X(xS)-3,Y(yS)-3, 6,6 )
 cx.lineWidth=2; cx.strokeStyle="blue"
 cx.moveTo(X(xP), Y(yP)); cx.lineTo(X(xQ), Y(yQ)); cx.lineTo(X(xR), Y(yR)); cx.lineTo(X(xP), Y(yP))
 cx.moveTo(X(xC), Y(yC)); cx.lineTo(X(xS), Y(yS))
cx.stroke()

cx.beginPath(); cx.textAlign="center"; cx.textBaseline="top", cx.font = "bold 16px Arial"
 cx.fillText( 0, X(0), Y(aY)+5 ); cx.fillText( 2, X(2), Y(aY)+5 ); cx.fillText( 4, X(4), Y(aY)+5 )
 cx.fillText( 6, X(6), Y(aY)+5 ); cx.fillText( 8, X(8), Y(aY)+5 ); cx.fillText( -2, X(-2), Y(aY)+5 )
 cx.textAlign="right"; cx.textBaseline="middle"
 cx.fillText( 0, X(aX)-5, Y(0) ); cx.fillText( 2, X(aX)-5, Y(2) ); cx.fillText( 4, X(aX)-5, Y(4) )
 cx.fillText( 6, X(aX)-5, Y(6) ); cx.fillText( 8, X(aX)-5, Y(8) )

 cx.textAlign="center"; cx.textBaseline="middle"
 cx.fillText( "P",X(-3.25),Y(1.7) ); cx.fillText( "Q",X(7.75),Y(4.7) ); cx.fillText( "R",X(1.75),Y(7.7) )
 cx.fillText( "C",X(2.75),Y(5.7) ); cx.fillText( "S",X(3.25),Y(3.25) )
cx.stroke()

</script>