サンプル1＿ボタンクリックでランダムな位置に描画する

onclick をボタンに仕込んで、クリックで描画するようにします。
描画位置は、Math.random() によってランダムにしています。

クリックしてください→

function draw1(g) {
    var cnvs = document.getElementById('canvas1');
    var ctx = cnvs.getContext('2d');
/*描画のためのx,yをランダムにつくる*/
    var x = Math.round(Math.random()*678);
    var y = Math.round(Math.random()*150);
/*グラデーションを3種類つくる*/
    var grad1  = ctx.createRadialGradient(x,y,0,x,y,100);
    grad1.addColorStop(0,'rgba(255,147,38,1)');
    grad1.addColorStop(1,'rgba(255,147,38,0)');
    var grad2  = ctx.createRadialGradient(x,y,0,x,y,100);
    grad2.addColorStop(0,'rgba(92,255,38,1)');
    grad2.addColorStop(1,'rgba(92,255,38,0)');
    var grad3  = ctx.createRadialGradient(x,y,0,x,y,100);
    grad3.addColorStop(0,'rgba(255,255,115,1)');
    grad3.addColorStop(1,'rgba(255,255,115,0)');	
/*引数「g」に各グラデを指定*/
    var gra;
    if (g == 1) gra = grad1;
    if (g == 2) gra = grad2;
    if (g == 3) gra = grad3;
/*正円を描画*/
    ctx.beginPath();
    ctx.fillStyle = gra;
    ctx.arc(x, y, 100, 0, Math.PI*2, false);
    ctx.fill();
}

サンプル2＿クリックした位置に描画する

クリックした位置に描画するようにしました。
色（5色）はランダムにしています。

onload = function() { /*こちらはロード時の読み込みが必要*/
    draw2();
};
function draw2() {
    var cnvs2 = document.getElementById('canvas2');
    var ctx2 = cnvs2.getContext('2d');
    /*イベントリスナー登録＿イベントはclickに*/
    cnvs2.addEventListener('click', onClick, false);
    function onClick (e) {
      /*このキャンバスの絶対座標値をゲットして、マウスの位置を取得*/
      var rect = e.target.getBoundingClientRect();
      var mouseX =  Math.round(e.clientX - rect.left);
      var mouseY =  Math.round(e.clientY - rect.top);
      /*色指定を5種類作ってランダム化する*/
      var color1 = '#f00';
      var color2 = '#ffeb00';
      var color3 = '#f0f';
      var color4 = '#0096ff';
      var color5 = '#0f0';
      var clr = Math.floor(Math.random()*5+1);
      var thisColor;
      if (clr == 1) thisColor = color1;
      if (clr == 2) thisColor = color2;
      if (clr == 3) thisColor = color3;
      if (clr == 4) thisColor = color4;
      if (clr == 5) thisColor = color5;
      /*色指定と、正円の描画*/
      ctx2.globalAlpha = 0.2;
      ctx2.fillStyle = thisColor;
      ctx2.beginPath();
      ctx2.arc(mouseX,mouseY,40,0,Math.PI*2,false);
      ctx2.fill();
    };
}

サンプル3＿マウスムーブで描画する

キャンバス上でマウスを動かすと描画するようにしました。
色（5色）と円の半径（3〜10px）をランダムにしています。
globalCompositeOperationを「lighter」にして、円が重なった部分が明るくなるようにしています。

onload = function() { /*こっちもロード時の読み込みが必要*/
    draw3();
};
function draw3() {
    var cnvs3 = document.getElementById('canvas3');
    var ctx3 = cnvs3.getContext('2d');
    /*イベントリスナー登録＿イベントはmousemove*/
    cnvs3.addEventListener('mousemove', onMove, false);
    function onMove (m) {
      /*このキャンバスの絶対座標値をゲットして、マウスの位置を取得*/
      var rect3 = m.target.getBoundingClientRect();
      var mx =  Math.round(m.clientX - rect3.left);
      var my =  Math.round(m.clientY - rect3.top);
      /*色指定を5種類作ってランダム化*/
      var clor1 = '#f00';
      var clor2 = '#ff0';
      var clor3 = '#f0f';
      var clor4 = '#0ff';
      var clor5 = '#0f0';
      var cl = Math.floor(Math.random()*5+1);
      var tColor;
      if (cl == 1) tColor = clor1;
      if (cl == 2) tColor = clor2;
      if (cl == 3) tColor = clor3;
      if (cl == 4) tColor = clor4;
      if (cl == 5) tColor = clor5;
      /*円の半径のランダム化（半径3〜10pxにしています）*/
      var hank = Math.floor(Math.random()*8+3);
      /*色指定と、正円の描画*/
      ctx3.globalAlpha = 0.4;
      ctx3.fillStyle = tColor;
      ctx3.beginPath();
      ctx3.globalCompositeOperation = 'lighter';
      ctx3.arc(mx,my,hank,0,Math.PI*2,false);
      ctx3.fill();
    };
}