<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid
#d3d3d3;" >
</canvas>
<script>
function inRad(num) {
return num * Math.PI / 180;
}
var rectX = 250, rectY = 250, rectW = 250, rectH = 250, rectAngle = 45;
var cnv = document.getElementById('myCanvas');
var ctx = cnv.getContext('2d');
var color = '#' + Math.floor(Math.random()*16777215).toString(16);
ctx.fillStyle = color;
ctx.fillRect(0, 0, 500,500);
var firstcol = '#' + Math.floor(Math.random()*16777215).toString(16);
var secondcol = '#' + Math.floor(Math.random()*16777215).toString(16);
ctx.translate(rectX, rectY);
for (var i = 0; i < 360; i += 45 ){
ctx.rotate(inRad(45));
ctx.fillStyle = firstcol;
ctx.fillRect(-rectW/2, -rectH/2, rectW, rectH);
ctx.fillStyle = secondcol;
ctx.fillRect(rectW/2, rectH/2, rectW, rectH);
}
</script>
</body>
</html>
| 