js canvas - Serbipunk/notes GitHub Wiki

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

(these chart below are convincing)

https://skia.org/docs/user/api/skblendmode_overview/

example:

<html>

<head>
	<meta charset="utf-8">
	<title> h </title>

</head>

<body>

</body>

<p> hello </p>

<canvas id="canvas" width="500" height="500"></canvas>

<script> 
		alert("hello~")

		const canvas = document.getElementById('canvas');
		const ctx = canvas.getContext('2d');

		ctx.globalCompositeOperation = 'xor';

		ctx.fillStyle = 'blue';
		ctx.fillRect(10, 10, 100, 100);

		ctx.fillStyle = 'red';
		ctx.fillRect(50, 50, 100, 100);
</script>

</html>

animation

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_animations#basic_animation_steps

⚠️ **GitHub.com Fallback** ⚠️