画布绘图工具

Question

How can I get the same effect on canvas like it's shown in the image below (source: here )

I try something like this LINK

e.preventDefault();
var x =  e.pageX;
var y =  e.pageY;
if (!drawing) return
ctx.beginPath();
ctx.globalAlpha = .3;
ctx.lineJoin ='round';
ctx.lineCap = 'butt'
ctx.shadowBlur = 0;
//ctx.globalCompositeOperation = "copy";
ctx.moveTo(prev.x, prev.y);
ctx.strokeStyle = '#000';
//ctx.strokeStyle = 'rgba(100,0,0,0.1)';
ctx.lineTo(x, y);
ctx.lineWidth = 20;
ctx.stroke();
ctx.closePath();
prev.x = x;
prev.y = y;

Answer 1

It looks like you almost have the effect you want.

(semi-transparent, overlapping rounded strokes with opacity accumulating where they overlap).

Try changing the globalAlpha to .03 instead of .3.

Answer 2

I've branched your jsFiddle, but I've amended the colour and alpha transparency a bit to get the same colour (ish) as your image :

http://jsfiddle.net/rsc8k/2/

ctx.globalAlpha = .1;
ctx.strokeStyle = '#337799';

Looks pretty similar. Note that that's all the changes I've made on your jsfiddle.