<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>