HTML5 canvas globalAlpha无法正常工作

Question

I need create smooth drawing lines with transparent without clearRect method i try use: globalAlpha and strokeStyle with rgba like this:

ctx.strokeStyle = "rgba( redChannel, greenChannel, blueChannel, AlphaChannel )";

But did not work both methods. How i can drawing transparent lines without clearRect method. While i use clearRect before each drawing globalAlpha works, but i need that working without it.

my code example:

 var el = document.getElementById('c'); var ctx = el.getContext('2d'); ctx.lineWidth = 10; ctx.lineJoin = ctx.lineCap = 'round'; ctx.globalAlpha = "0.2"; //ctx.strokeStyle = "rgba(255, 0, 0, 150)"; ctx.strokeStyle = "red"; var isDrawing, points = [ ]; el.onmousedown = function(e) { isDrawing = true; points.push({ x: e.clientX, y: e.clientY }); }; el.onmousemove = function(e) { if (!isDrawing) return; //ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); points.push({ x: e.clientX, y: e.clientY }); ctx.beginPath(); ctx.moveTo(points[0].x, points[0].y); for (var i = 1; i < points.length; i++) { ctx.lineTo(points[i].x, points[i].y); } ctx.stroke(); ctx.closePath(); }; el.onmouseup = function() { isDrawing = false; points.length = 0; }; 

 canvas { border: 1px solid #ccc } 

 <canvas id="c" width="500" height="300"></canvas> 

Answer 1

You are redrawing the entire path every time the mouse moves, so even though the globalAlpha value is set to 0.2 the layering effect makes the line appear solid.

Option 1: use clearRect to clear the path onmousemove then redraw;

Option 2: draw only the last segment of the path, but overlaps are visible:

 var el = document.getElementById('c'); var ctx = el.getContext('2d'); ctx.lineWidth = 10; ctx.lineJoin = ctx.lineCap = 'round'; ctx.globalAlpha = "0.2"; //ctx.strokeStyle = "rgba(255, 0, 0, 150)"; ctx.strokeStyle = "red"; var isDrawing, points = [ ]; el.onmousedown = function(e) { isDrawing = true; points.push({ x: e.clientX, y: e.clientY }); }; el.onmousemove = function(e) { if (!isDrawing) return; //ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); points.push({ x: e.clientX, y: e.clientY }); ctx.beginPath(); //draw just the last segment if(points.length>1) { ctx.moveTo(points[points.length-2].x, points[points.length-2].y); ctx.lineTo(points[points.length-1].x, points[points.length-1].y); } ctx.stroke(); ctx.closePath(); }; el.onmouseup = function() { isDrawing = false; points.length = 0; }; 

 canvas { border: 1px solid #ccc } 

 <canvas id="c" width="500" height="300"></canvas> 

Option 3: set the opacity of the canvas element

 var el = document.getElementById('c'); var ctx = el.getContext('2d'); ctx.lineWidth = 10; ctx.lineJoin = ctx.lineCap = 'round'; //ctx.globalAlpha = "0.2"; //ctx.strokeStyle = "rgba(255, 0, 0, 150)"; ctx.strokeStyle = "red"; var isDrawing, points = [ ]; el.onmousedown = function(e) { isDrawing = true; points.push({ x: e.clientX, y: e.clientY }); }; el.onmousemove = function(e) { if (!isDrawing) return; //ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); points.push({ x: e.clientX, y: e.clientY }); ctx.beginPath(); ctx.moveTo(points[0].x, points[0].y); for (var i = 1; i < points.length; i++) { ctx.lineTo(points[i].x, points[i].y); } ctx.stroke(); ctx.closePath(); }; el.onmouseup = function() { isDrawing = false; points.length = 0; }; 

 canvas { border: 1px solid #ccc; opacity:0.2; } 

 <canvas id="c" width="500" height="300"></canvas> 

Answer 2

Option 3 : use two canvas, on main - draw only on mouse release, and on second preview canvas, just show progress, so drawing will be visible even on mouse move. Also for preview canvas we need to do some tricks like clean previous line segment, so everything looks good.

 //main canvas var el = document.getElementById('c'); var ctx = el.getContext('2d'); //preview var el2 = document.getElementById('c2'); var ctx2 = el2.getContext('2d'); ctx.lineWidth = 10; ctx2.lineWidth = 10; ctx.lineJoin = ctx.lineCap = 'round'; ctx2.lineJoin = ctx2.lineCap = 'round'; ctx.strokeStyle = "rgba(255, 0, 0, 0.5)"; ctx2.strokeStyle = "rgba(255, 0, 0, 0.5)"; var isDrawing, points = [ ]; el2.onmousedown = function(e) { isDrawing = true; points.push({ x: e.clientX, y: e.clientY }); ctx.beginPath(); ctx2.beginPath(); }; el2.onmousemove = function(e) { if (!isDrawing) return; points.push({ x: e.clientX, y: e.clientY }); //draw just the last segment if(points.length>1) { ctx.moveTo(points[points.length-2].x, points[points.length-2].y); ctx.lineTo(points[points.length-1].x, points[points.length-1].y); //start preview ctx2.beginPath(); //clean from last line ctx2.globalCompositeOperation = "destination-out"; ctx2.strokeStyle = "rgba(255, 0, 0, 1)"; ctx2.moveTo(points[points.length-2].x, points[points.length-2].y); ctx2.lineTo(points[points.length-1].x, points[points.length-1].y); ctx2.stroke(); //rest ctx2.strokeStyle = "rgba(255, 0, 0, 0.5)"; ctx2.globalCompositeOperation = "source-over"; //draw new line segment ctx2.moveTo(points[points.length-2].x, points[points.length-2].y); ctx2.lineTo(points[points.length-1].x, points[points.length-1].y); ctx2.stroke(); } }; el2.onmouseup = function() { ctx2.clearRect(0, 0, ctx2.canvas.width, ctx2.canvas.height); ctx.stroke(); isDrawing = false; points.length = 0; }; 

 canvas { border: 1px solid #ccc; position:absolute; } 

 <canvas id="c" width="500" height="200"></canvas> <canvas id="c2" width="500" height="200"></canvas>