Title: HTML5 canvas globalAlpha not working
Tags: javascript;html;canvas
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"&gt;</canvas&gt;

Here is the accepted answer: 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&gt;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"&gt;</canvas&gt;
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"&gt;</canvas&gt;

Here is another answer: 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&gt;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"&gt;</canvas&gt;
<canvas id="c2" width="500" height="200"&gt;</canvas&gt;
Comment for this answer: it's very nice, but while i drawing i see not transparent line. Can i make it transparent too ?
Comment for this answer: Yeah it's nice i try to make real time show transparent line without `clearRect` because i have a lot of lines and cannot redrawing on the each `mousemove ` event as well as cannot use canvas style with opacity like show @Ben because previous drawings on the canvas get opacity too..

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2015:00:02/04/15', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><html><canvas>', 'Title': 'HTML5 canvas globalAlpha not working', 'ViewCount': 2529, 'id': 28321588, 'user_AboutMe': None, 'user_AccountId': 5358350.0, 'user_DisplayName': 'Your choice', 'user_Reputation': 355.0, 'user_Views': 91.0, 'user_id': 4270436.0}}