Hello everyone, I have a problem here.
I do a small drawing and on the task I need to draw lines with different levels of transparency on the canvas. Here is an example of such a drawing:
https://jsfiddle.net/08cw6mh7/

var canvas = document.getElementById('paint'); var ctx = canvas.getContext('2d'); var radius = 10; var drag= false; canvas.width = window.innerWidth; canvas.height = window.innerHeight; $("#paint").mousedown(function(e){ drag = true; }); $("#paint").mousemove(function(e){ if (drag){ ctx.lineWidth = radius*2; ctx.strokeStyle="rgba(50,100,150,.25)" ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); ctx.beginPath(); ctx.arc(e.clientX, e.clientY, radius, 0, Math.PI*2); ctx.fillStyle="rgba(50,100,150,.25)" ctx.fill(); ctx.beginPath(); ctx.moveTo(e.clientX, e.clientY) } }); $("#paint").mouseup(function(e){ drag = false ; }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas id="paint" style="display: block"></canvas>

The problem is the following: if you draw the fill color for example rgba (50, 100, 150, 1) then everything works well as transparency 1. And when you move the mouse, the colors, although superimposed on each other, are not noticeable due to the total opacity. But if you start to change the transparency for example rgba (50, 100, 150, .25), then trash starts - the colors begin to overlap and it turns out not a uniformly transparent line, but it is not clear what. What can be done?

  • An example of an envelope from a color with transparency to a color without transparency with regard to the background: yolijn.com/convert-rgba-to-rgb - Grundy

1 answer 1

I will add comment Grundy I supplemented your code with the function of its link. Here is an example: https://jsfiddle.net/

 var canvas = document.getElementById('paint'); canvas.width = 400; canvas.height = 300; var ctx = canvas.getContext('2d'); var radius = 10; var drag = false; var alpha = 0.25; var range = document.getElementById('alpha'); range.addEventListener('change', function(e) { alpha = parseFloat(this.value); }, false); canvas.addEventListener('mousedown', function(e) { drag = true; }, false); canvas.addEventListener('mouseup', function(e) { drag = false; }, false); canvas.addEventListener('mousemove', function(e) { if (drag) { var offset = $(canvas).offset(); var x = e.clientX - offset.left; var y = e.clientY - offset.top; var color = combineColors([255, 255, 255], [50, 100, 150, alpha]); ctx.fillStyle = color; ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI * 2); ctx.fill(); } }, false); function combineColors(bg, color) { var a = color[3]; var r = Math.round((1 - a) * bg[0] + a * color[0]); var g = Math.round((1 - a) * bg[1] + a * color[1]); var b = Math.round((1 - a) * bg[2] + a * color[2]); var color = [r, g, b].join(); return 'rgb(' + color + ')'; } 
 #paint { display: block; border: 1px solid; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas id="paint"></canvas> <input id="alpha" type="range" min="0" max="1" step="0.01" value="0.25">