sample: draw images to random position on canvas

by sii_side

HTML

<canvas id="c" width="300" height="300"></canvas>

JavaScript

var c = document.querySelector("#c");
var w = c.width;
var h = c.height;
var ctx = c.getContext("2d");

var img = new Image();
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAIAAABL1vtsAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAAlSURBVDhPY3gro0IhGjUCgUaNQKBRIxBo1AgEGjUCgSg2QkYFADRyOTPVuDU7AAAAAElFTkSuQmCC";

img.addEventListener("load", function() {
	var r = Math.random() * 10;
	for(var i = 0; i < r; i++) {
  	var rx = Math.random();
  	var ry = Math.random();
    ctx.drawImage(img, w * rx, h * ry, 30, 30);
  }
}, false);