HTML Canvas lines transparency not working on mobile safari

Question

I am drawing lines using a canvas on my website ( https://framedthread.com ), they are lines with transparency and they show up fine on android and windows, but on mobile safari they do not. The lines get drawn but transparency is not being applied, which results in the lines being completely dark instead and the final image being overly dark.

Here is the code I used for drawing the lines:

var canvas_string = document.getElementById('homepage_portrait_string');
var ctx_string = canvas_string.getContext('2d');
canvas_string.width=601;
canvas_string.height=751;

var i=0;
var number_of_lines= lines_instructions.length;
setTimeout(function(){

    window.draw_function_interval=setInterval(function(){ 

        //Draw best line in string model
        ctx_string.beginPath();
        ctx_string.lineWidth = 0.2;
        ctx_string.strokeStyle = 'rgba(0,0,0,50)';
        ctx_string.moveTo(nail_x_coordinates[lines_instructions[i]], nail_y_coordinates[lines_instructions[i]]);
        ctx_string.lineTo(nail_x_coordinates[lines_instructions[i+1]], nail_y_coordinates[lines_instructions[i+1]]);
        ctx_string.stroke();
        ctx_string.closePath();
        i++;
        if(i==number_of_lines){
            clearInterval(window.draw_function_interval);
        }

      }, 6);

}, 1350);

The canvas is being positioned with position:absolute, but I don't think that matters. Thank you very much for your help. I am really out of ideas.

Answer 1

The alpha in rgba is a value between 0 for completely transparent and 1 for opaque. Try changing the rgba to rgba(0,0,0,0.5) if you want 50% transparency.

But even then, according to this post rgba is rendered differently on browsers.