<script> var canvas; var context; var cx; var cy; var image1 = new Image(); image1.src = "img/window.png"; var inc = 30; // amount of windows var radx = 2; // horizontal radius // 2 is at the horizontal center var rady = .55; // vertical radius // 2 is at the vertical center function init() { canvas = document.getElementById("myCanvas"); context = canvas.getContext("2d"); cx = canvas.width/2; cy = canvas.height/2; // FILL BACKGROUND context.fillStyle = "#333"; context.fillRect(0,0,canvas.width, canvas.height); // CREATE WINDOWS image1.onload = windows(inc, radx, rady); } function windows(inc, radx, rady) { for (var i=0; i<inc; i++) { context.save(); context.translate(cx,cy); context.rotate( Math.PI*2*i/inc); context.drawImage(image1, -image1.width/radx, -image1.height/rady); context.restore(); } } </script>