Extension:EmbedScript/Pythagorean theorem

The live version allows you to grab the corners of the triangle to change the size of the two perpendicular sides, and updates the calculation to show you how the areas change.

<embedscript>

var width = 640,
    height = 480,
    $canvas = $('<canvas>'),
    ctx = $canvas[0].getContext('2d');

// Avoid scrollbars
$('body').css('overflow', 'hidden');

$canvas
    .attr('width', width)
    .attr('height', height)
    .css('position', 'absolute')
    .css('top', 0)
    .css('left', 0)
    .css('right', 0)
    .css('bottom', 0)
    .appendTo('body');

var $labels = $('<table>' +
'<tr><td>a²<td>+<td>b²<td>=<td>c²' +
'<tr><td><span class="a"></span>²<td>+<td><span class="b"></span>²<td>=<td>c²' +
'<tr><td><span class="a2"></span><td>+<td><span class="b2"></span><td>=<td>c²' +
'<tr><td colspan=3><span class="c2"></span><td>=<td>c²' +
'<tr><td colspan=3>√<span class="c2"></span><td>=<td>c' +
'<tr><td colspan=3><span class="c"></span><td>=<td>c' +
'</table>');
$labels
    .css('position', 'absolute')
    .css('width', '200px')
    .css('right', 0)
    .appendTo('body');

var a = 10,
    b = 15,
    mina = 5,
    maxa = 25,
    minb = 5,
    maxb = 35,
    c,
    scale = 10,
    sa,
    sb,
    sc,
    x = 120,
    y = 300;

function round1(a) {
    return Math.round(a * 10) / 10;
}

function redraw() {
    ctx.clearRect(0, 0, 640, 480);

    c = Math.sqrt(a*a + b*b);

    // Math it up!

    $('.a').text(round1(a));
    $('.b').text(round1(b));
    $('.a2').text(round1(a*a));
    $('.b2').text(round1(b*b));
    $('.c2').text(round1(a*a + b*b));
    $('.c').text(round1(c));


    // Draw!
    sa = a * scale;
    sb = b * scale;
    sc = c * scale;

    // a^2
    ctx.fillStyle = '#bfc4e3';
    ctx.fillRect(x - sa, y - sa, sa, sa);

    // b^2
    ctx.fillStyle = '#bfe3c3';
    ctx.fillRect(x, y, sb, sb);

    // c^2
    ctx.fillStyle = '#bfe3e3';
    var theta = Math.atan(b / a);
    ctx.beginPath();
    ctx.moveTo(x, y - sa);
    ctx.lineTo(x + Math.cos(theta)*sc, y - sa - Math.sin(theta)*sc);
    ctx.lineTo(x + sb + Math.cos(theta)*sc, y - Math.sin(theta)*sc);
    ctx.lineTo(x + sb, y);
    ctx.fill();

    // main triangle
    ctx.strokeStyle = 'solid 1px black';
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x, y - sa);
    ctx.lineTo(x + sb, y);
    ctx.closePath();
    ctx.stroke();

    // right tri marker
    ctx.strokeRect(x, y - 10, 10, 10);
}

redraw();

$canvas.bind('mousedown', function(event) {
   var hot = 24,
       mx = event.clientX,
       my = event.clientY;
   if (Math.abs(mx - x) <= hot && Math.abs(my - (y - sa)) <= hot) {
       // changing a
       $canvas.bind('mousemove.a', function(event) {
         dy = my - event.clientY;
         my = event.clientY;
         a += (dy / scale);
         if (a < mina) {
             a = mina;
         } else if (a > maxa) {
             a = maxa;
         }
         redraw();
       });
       $canvas.bind('mouseup.a', function(event) {
           $canvas.unbind('.a');
       });
   }
   if (Math.abs(mx - (x + sb)) <= hot && Math.abs(my - y) <= hot) {
       // changing b
       $canvas.bind('mousemove.b', function(event) {
         dx = event.clientX - mx;
         mx = event.clientX;
         b += (dx / scale);
         if (b < minb) {
             b = minb;
         } else if (b > maxb) {
             b = maxb;
         }
         redraw();
       });
       $canvas.bind('mouseup.b', function(event) {
           $canvas.unbind('.b');
       });
   }
});


</embedscript>