draft-parts.html

<style>
body {
	margin: 0;
}
section {
	padding: 2em;
	display: flex;
	justify-content: space-around;
}
section.s1 {
	background-color: yellowgreen;
}

#canvas3 {
	display: inline-block;
	clip-path: polygon(0px 0px, 0px 199px, 174px 100px);
	position: absolute;
	left: 20px;
	z-index: 5;
}

#triangle1 {
	clip-path: polygon(0px 0px, 0px 199px, 174px 100px);
	display: inline-block;
	height: 200px;
	width: 174px;
	position: relative;
	z-index: 1;
}
#triangle1::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	overflow: hidden;
	background: red;
}
.triangle1 {
	position: relative;
}
</style>

<section class="s1">
		
	<canvas id="canvas2"  height="200" width="200"></canvas>

	<div class="triangle1">
		<canvas id="canvas3"  height="200" width="174"></canvas>
		<div id="triangle1"></div>
	</div>

	<svg id="circle" width="200" height="200">
		<defs>
			<mask id="hole">
				<rect width="100%" height="100%" fill="white"/>
				<circle r="80" cx="100" cy="100" fill="black"/>
			</mask>
		</defs>

		<circle id="donut1" r="100" cx="100" cy="100" mask="url(#hole)" />
			
	</svg>
</section>

<script src="https://unpkg.com/color-tf"></script>
<script>
const {PI} = Math;

var {width, height}  = canvas3;
var ctx = canvas3.getContext('2d');
ctx.beginPath();
ctx.moveTo(0,0)
ctx.lineTo(0, height);
ctx.lineTo(width, height/2);
ctx.closePath();
ctx.clip();
ctx.fillStyle="rgba(0,0,0,0)";
ctx.fill();

var imageData = ctx.getImageData(0, 0, width, height);
var {data} = imageData;

var [x1,y1] = [0, 0];
var [x2,y2] = [0, height];
var [x3,y3] = [width, height/2];
var det = (y2-y3) * (x1-x3) + (x3-x2) * (y1-y3);
function barycentric(x,y) {
	var i1 = ((y2-y3)*(x-x3)+(x3-x2)*(y-y3))/det;
	var i2 = ((y3-y1)*(x-x3)+(x1-x3)*(y-y3))/det;
	//var _i1 = i1*.9;
	//var _i2 = i2*1.1;
	var i3 = 1-i1-i2;
	//var S = i1+i2+i3;
	return [i1, i2, i3];
}

for (var j = 0; j < height; j++) {
	for (var i = 0; i < width; i++) {
		var [i1, i2, i3] = barycentric(i,j);
		var k = Math.floor(255*(i1+i2));
		var v = Math.floor(255*i2);
		var index = (j*width+i)*4;
		data[index] = v;
		data[index+1] = v;
		data[index+2] = v;
		data[index+3] = k;
	}
}

ctx.putImageData(imageData, 0, 0);

var {width, height}  = canvas2;
var half = width/2;
var radius = .8 * half;
var cx = canvas2.getContext('2d');

cx.arc(half, half, radius, 0, 2*PI,false);
cx.lineWidth=20;
cx.stroke();
cx.clip();


var imageData = cx.getImageData(0, 0, width, height);
var {data} = imageData;

for (var j = 0; j < height; j++) {
	for (var i = 0; i < width; i++) {
		var [r, g, b] = colorTf.hsl2rgb((Math.atan2(j-half, i-half)+PI)/(2*PI), 1, .5).map(x=>Math.round(x*255));
		var index = (j*width+i)*4;
		data[index] = r;
		data[index+1] = g;
		data[index+2] = b;
		data[index+3] = 0xff;
	}
}

cx.putImageData(imageData, 0, 0);

donut1.style.fill=`red`;	

</script>