Tampilan Cermin Cembung :

Coding Cermin Cembung :

<table border="0" width="100%" style="margin-top:-160px">

<tr>

<td colspan="2" style="padding:10px">

<h2> CERMIN CEMBUNG </h2>

</td>

</tr>

<tr>

<td valign="top" width="25%" style="padding:10px">

<table width="100%">

<tr>

<td>So</td><td>=</td><td><input id="s0" type="text" class="form-control"

/></td><td><span style="margin-left: -34px;">cm</span></td>

</tr>

<tr>
 <td>R</td><td>=</td><td><input id="r" type="text" class="form-
control"/></td><td><span style="margin-left: -34px;">cm</span></td>

</tr>

<tr>

<td colspan="3" align="right">

<button onclick="myFunction()">Hitung</button>

</td>

</tr>

</table>

<table width="100%">

<tr>

<td>F</td><td>=</td><td><input id="f" type="text" class="form-control"

/></td><td><span style="margin-left: -34px;">cm</span></td>

</tr>

<tr>

<td>S'</td><td>=</td><td><input id="s" type="text" class="form-control"

/></td><td><span style="margin-left: -34px;">cm</span></td>

</tr>

<tr>

<td>M</td><td>=</td><td><input id="m" type="text" class="form-control"/></td>

</tr>

<tr>

<td><br><br><br>Note</td><td></td><td></td>

</tr>

<tr>
 <td><br><div style="width:10px; height:3px; background-
color:red;"></div></td>

<td></td>

<td><br>Bayangan</td>

</tr>

<tr>

<td><br><div style="width:10px; height:3px; background-

color:#33fcff;"></div></td>

<td></td>

<td><br>Benda</td>

</tr>

</table>

</td>

<td>

<canvas id="DemoCanvas" width="1000" height="300" style="

-moz-transform: scale(-1, 1);

-webkit-transform: scale(-1, 1);

-o-transform: scale(-1, 1);

transform: scale(-1, 1);

filter: FlipH;

margin-left:10px"></canvas>

<img src="materi/arsrian2.png" width="150px" id="im2" height="350px" style="

-moz-transform: scale(-1, 1);

-webkit-transform: scale(-1, 1);

-o-transform: scale(-1, 1);

transform: scale(-1, 1);

filter: FlipH;

position: relative;

top: -362px;

display:none;

left: 438px;" />

<p id="label_r" style="

display:none;

position: relative;

top: -522px;

left: 375px;">f</p>

<p id="label_f" style="

display:none;

position: relative;

top: -550px;

left: 375px;">R</p>

<p id="ru1" style="

display:none;

top: -650px;

position: relative;

left: 375px;">1</p>
<p id="ru2" style="

display:none;

top: -678px;

position: relative;

left: 375px;">2</p>

<p id="ru3" style="

display:none;

top: -706px;

position: relative;

left: 375px;">3</p>

<p id="ru4" style="

display:none;

top: -734px;

position: relative;

left: 375px;">4</p>

</td>

</table>