<canvas id="canvas" style="display: block;"></canvas>

#canvas{
background-color:#46bba4;
}

can = document.getElementById('canvas'); 

can.width = 500; 
can.height = 500; 

var ctx = can.getContext('2d'); //Выбрать пространство

//Функция рисования
$( "#canvas" ).dblclick(function() {
 
  ctx.closePath();
  ctx.fill();//Заполнение 
 ctx.beginPath();
});

can.addEventListener('mousedown', function(e){
  ctx.lineJoin = "round";
ctx.strokeStyle = 'red';
ctx.fillStyle = 'red' //Цвет  
ctx.lineTo(e.clientX, e.clientY); //Кординаты линий
ctx.lineWidth = 10;//Толщена линий
ctx.arc(e.clientX, e.clientY, 10 / 20 ,0, Math.PI * 2);  //Круг

ctx.stroke();
});