document body style height 450px let canvas document createElement canvas canvas style width 400px canvas style height 400px canvas style border 1pt solid blue document body appendChild canvas console log canvas console log canvas width console log canvas height var ctx canvas getContext 2d ctx fillStyle ivory var objects var w canvas width var h canvas height taken from http stackoverflow com a 23486828 3702797 for var i 0 i 100 i objects push angle Math random 360 x 100 Math random w 2 y 100 Math random h 2 radius 10 Math random 40 speed 1 Math random 20 end for i var imgA new Image var imgB new Image imgA onload function drawLoop imgA crossOrigin imgB crossOrigin anonymous imgA src https dl dropboxusercontent com s 4e90e48s5vtmfbd aaa png imgB src https dl dropboxusercontent com s rumlhyme6s5f8pt ABC png var drawLoop function ctx fillRect 0 0 w h for var n 0 n 100 n var entity objects n velY Math cos entity angle Math PI 180 entity speed velX Math sin entity angle Math PI 180 entity speed entity x velX entity y velY ctx drawImage imgB entity x entity y entity radius entity radius ctx drawImage imgA entity x entity y entity radius entity radius entity angle requestAnimationFrame drawLoop End drawLoop
imgA onload function drawLoop imgA crossOrigin imgB crossOrigin anonymous imgA src https dl dropboxusercontent com s 4e90e48s5vtmfbd aaa png imgB src https dl dropboxusercontent com s rumlhyme6s5f8pt ABC png var drawLoop function ctx fillRect 0 0 w h for var n 0 n 100 n var entity objects n velY Math cos entity angle Math PI 180 entity speed velX Math sin entity angle Math PI 180 entity speed entity x velX entity y velY ctx drawImage imgB entity x entity y entity radius entity radius ctx drawImage imgA entity x entity y entity radius entity radius entity angle requestAnimationFrame drawLoop End drawLoop