<iframe 
    src="https://jsxgraph.org/share/iframe/euler-line" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Euler line" 
    allowfullscreen
></iframe>

<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution 4.0 International License.
    https://creativecommons.org/licenses/by/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-1.5, 2, 1.5, -1],
        keepaspectratio: true
    });
    
    // Set visual attributes
    var cerise = {
            strokeColor: '#901B77',
            fillColor: '#CA147A'
        },
    
        grass = {
            strokeColor: '#009256',
            fillColor: '#65B72E',
            visible: true,
            withLabel: true
        },
    
        perpendicular = {
            strokeColor: 'black',
            dash: 1,
            strokeWidth: 1,
            point: JXG.deepCopy(cerise, {
                visible: true,
                withLabel: true
            })
        },
    
        median = {
            strokeWidth: 1,
            strokeColor: '#333333',
            dash: 2
        },
    
        // Construct triangle ABC
        A = board.create('point', [1, 0], cerise),
        B = board.create('point', [-1, 0], cerise),
        C = board.create('point', [0.2, 1.5], cerise),
        pol = board.create('polygon', [A, B, C], {
            fillColor: '#FFFF00',
            lines: {
                strokeWidth: 2,
                strokeColor: '#009256'
            }
        });
    
    // Orthocenter H
    var pABC, pBCA, pCAB, i1;
    perpendicular.point.name = 'H_c';
    pABC = board.create('perpendicular', [pol.borders[0], C], perpendicular);
    perpendicular.point.name = 'H_a';
    pBCA = board.create('perpendicular', [pol.borders[1], A], perpendicular);
    perpendicular.point.name = 'H_b';
    pCAB = board.create('perpendicular', [pol.borders[2], B], perpendicular);
    grass.name = 'H';
    i1 = board.create('intersection', [pABC, pCAB, 0], grass);
    
    // Centroid S
    var mAB, mBC, mCA;
    cerise.name = 'M_c';
    mAB = board.create('midpoint', [A, B], cerise);
    cerise.name = 'M_a';
    mBC = board.create('midpoint', [B, C], cerise);
    cerise.name = 'M_b';
    mCA = board.create('midpoint', [C, A], cerise);
    
    var ma, mb, mc, i2;
    ma = board.create('segment', [mBC, A], median);
    mb = board.create('segment', [mCA, B], median);
    mc = board.create('segment', [mAB, C], median);
    grass.name = 'S';
    i2 = board.create('intersection', [ma, mc, 0], grass);
    
    // Circumccenter U
    grass.name = 'U';
    var c = board.create('circumcircle', [A, B, C], {
        strokeColor: '#000000',
        dash: 3,
        strokeWidth: 1,
        center: grass
    });
    
    // Euler line: U, H and S are collinear
    var euler = board.create('line', [i1, i2], {
        strokeWidth: 2,
        strokeColor: '#901B77'
    });
    
 </script> 

<jsxgraph width="100%" aspect-ratio="1 / 1" title="Euler line" description="This construction was copied from JSXGraph examples database: BTW HERE SHOULD BE A GENERATED LINKuseGlobalJS="false">
   /*
   This example is licensed under a 
   Creative Commons Attribution 4.0 International License.
   https://creativecommons.org/licenses/by/4.0/
   
   Please note you have to mention 
   The Center of Mobile Learning with Digital Technology
   in the credits.
   */
   
   const board = JXG.JSXGraph.initBoard(BOARDID, {
       boundingbox: [-1.5, 2, 1.5, -1],
       keepaspectratio: true
   });
   
   // Set visual attributes
   var cerise = {
           strokeColor: '#901B77',
           fillColor: '#CA147A'
       },
   
       grass = {
           strokeColor: '#009256',
           fillColor: '#65B72E',
           visible: true,
           withLabel: true
       },
   
       perpendicular = {
           strokeColor: 'black',
           dash: 1,
           strokeWidth: 1,
           point: JXG.deepCopy(cerise, {
               visible: true,
               withLabel: true
           })
       },
   
       median = {
           strokeWidth: 1,
           strokeColor: '#333333',
           dash: 2
       },
   
       // Construct triangle ABC
       A = board.create('point', [1, 0], cerise),
       B = board.create('point', [-1, 0], cerise),
       C = board.create('point', [0.2, 1.5], cerise),
       pol = board.create('polygon', [A, B, C], {
           fillColor: '#FFFF00',
           lines: {
               strokeWidth: 2,
               strokeColor: '#009256'
           }
       });
   
   // Orthocenter H
   var pABC, pBCA, pCAB, i1;
   perpendicular.point.name = 'H_c';
   pABC = board.create('perpendicular', [pol.borders[0], C], perpendicular);
   perpendicular.point.name = 'H_a';
   pBCA = board.create('perpendicular', [pol.borders[1], A], perpendicular);
   perpendicular.point.name = 'H_b';
   pCAB = board.create('perpendicular', [pol.borders[2], B], perpendicular);
   grass.name = 'H';
   i1 = board.create('intersection', [pABC, pCAB, 0], grass);
   
   // Centroid S
   var mAB, mBC, mCA;
   cerise.name = 'M_c';
   mAB = board.create('midpoint', [A, B], cerise);
   cerise.name = 'M_a';
   mBC = board.create('midpoint', [B, C], cerise);
   cerise.name = 'M_b';
   mCA = board.create('midpoint', [C, A], cerise);
   
   var ma, mb, mc, i2;
   ma = board.create('segment', [mBC, A], median);
   mb = board.create('segment', [mCA, B], median);
   mc = board.create('segment', [mAB, C], median);
   grass.name = 'S';
   i2 = board.create('intersection', [ma, mc, 0], grass);
   
   // Circumccenter U
   grass.name = 'U';
   var c = board.create('circumcircle', [A, B, C], {
       strokeColor: '#000000',
       dash: 3,
       strokeWidth: 1,
       center: grass
   });
   
   // Euler line: U, H and S are collinear
   var euler = board.create('line', [i1, i2], {
       strokeWidth: 2,
       strokeColor: '#901B77'
   });
   
</jsxgraph>