<!DOCTYPE html>
<title>createPattern() with SVG fragments</title>
<script>
onload = function() {
var context = document.getElementsByTagName('canvas')[0].getContext('2d');
fillStyles = [ "green", "red", "blue", "green", "red", "blue" ];
fillStyles.forEach(function(fillStyle, i) {
context.fillStyle = fillStyle;
context.fillRect(i*60, i*60, 120, 120);
});
}
</script>
<canvas width="480" height="480"></canvas>