Question

I’m trying to draw a path using HTML Canvas. It consists of several Bezier curves linked together. For some reason, I cannot draw the whole path and then stroke. Instead, I need to stroke for each Bezier curve. I’m using a light purple color as the stroke color, but at the intersection of the curves, I seem to get something like white instead of the light purple I expect. Like this (sorry I can’t post an image since I’m new on Stack Overflow):

I’m using stroke style with opacity 1, so I believe it’s not a transparency issue. So what might be causing this problem?

FYI, I’m drawing each Bezier curve with code like this, where a is the drawing context of the canvas, and this.bloom.c is something like “rgba(xxx,xxx,xxx,1)“:

a.strokeStyle = this.bloom.c;
a.beginPath();
a.moveTo(e.x, e.y);
a.bezierCurveTo(c.x, c.y, b.x, b.y, d.x, d.y);
a.stroke(); 

Thanks very much!

Answer 1

Use the appropriate “blend modes” natively supported by HTML5 Canvas context for Composite Operations. In your case you may use ‘source-over‘

For example:

var context = document.getElementById('myCanvas').getContext('2d');
context.globalCompositeOperation = 'source-over';

See Compositing and Blending 1.0

source-atop
source-in
source-out
source-over
destination-atop
destination-in
destination-out
destination-over
lighter
xor
copy