[Dilettante_Pro]

<canvas id="myCanvas"  style="width:400px; height:200px;border:1px solid black ">
    <p>Ваш браузер не поддерживает рисование.</p>
  </canvas>
<script>
var canvas = document.getElementById("myCanvas");
    ctx = canvas.getContext('2d');
    cPushArray = new Array();
    cstep = -1;
    ctx.lineWidth = 1;
    ctx.lineCap = "round";
    ctx.scale(0.75,0.75);
    flag = 0;
    ctx.strokeStyle = "#fc0";
    ctx.fillStyle = "#fc0";

    
function spray() {
    canvas.onmousedown = spray_down;
    canvas.onmousemove = spray_move;
    canvas.onmouseup = spray_up;
    var startx,starty;
    const spray_size = 20;
    var pencil_flag = false;

    function spray_down(e){
        startx = e.x;
        starty = e.y;
        pencil_flag = true;
    }
    function spray_move(event){
        if(pencil_flag){
            endx = event.clientX;
            endy = event.clientY;
            ctx.beginPath();
            ctx.rect(endx, endy, 1, 1);
            for (i = 11; i--;) {
                ctx.rect(endx + Math.random() * spray_size - spray_size/2,
                    endy + Math.random() * spray_size - spray_size/2,
                  1, 1);
            }
            ctx.closePath();
            ctx.stroke();
            ctx.fill();
             startx = endx;
            starty = endy;
        }
    }
    function spray_up(event){
        pencil_flag = false;
    }
}
spray();
</script>