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