<head>
</head>
<body>
<script>
<head>
<style type = "text/css">
canvas {
background: url(ultra-pda.ru/wp-content/gallery/640px/1.jpg) no - repeat;
}
</style>
<script>
var canvas, ctx;
function init() {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
canvas.addEventListener('click', circles);
}
function circles(e) {
ctx.fillStyle = '#FFF';
ctx.globalAlpha = 0.1;
for (var i = 0; i < 15; i++) {
ctx.beginPath();
ctx.arc(e.pageX, e.pageY, 10 + 10 * i, 0, Math.PI * 2, false);
ctx.stroke();
alert(i);
ctx.globalCompositeOperation = 'copy';
}
}
</script>
</head>
<body onload="init()">
<canvas id="canvas" width="640" height="480"></canvas>
</body>
</script>
</body>
В песочницу залил, а то тут при запуске на грузится картинка чёто.
http://learn.javascript.ru/play/ObbxO
ЗЫ: хочу чтобы работало так же только без алертов.
дзен, премного благодарен.