<!DOCTYPE html>
<script>
  window.onload = function() {
    var context = document.getElementById('c').getContext('2d');
    context.scale(2,2);
    context.beginPath();
    context.rect(0,0,75,75);
    context.clip();
    context.fillStyle = 'green';
    context.fillRect(0,0,30,30);
    context.fillRect(50,50,30,30);
  }
</script>
<p>Two green squares of different sizes should appear below</p>
<canvas id="c" width="300" height="300"></canvas>