RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 20:47:45 +00:00
Code Issues Activity Actions

LibWeb: Add initial implementation of CRC2D.globalAlpha

Browse source 
Works for fills and strokes (using colors, gradients, or patterns),
along with images.

fill_rect() has been updated to use fill_path(), which allows it to
easily transform the rect, and already supports opacity.

Co-authored-by: MacDue <macdue@dueutil.tech>
This commit is contained in:
Simon Danner 2023-05-19 22:42:47 +02:00 • committed by Andreas Kling
parent ff5d530aa3
commit 45f86466bb
8 changed files with 150 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

57
Base/res/html/misc/canvas-global-alpha.html Normal file
View file

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<title>Canvas 2D global alpha test</title>
<style type="text/css">
body {
color: #fff;
}
canvas {
border-width: 1px;
border-style: solid;
border-color: #fff;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
ctx = document.getElementById("foo").getContext("2d");
image = new Image(100, 100);
image.onload = drawImage;
image.src = "car.png";
function drawImage() {
ctx.drawImage(image, 0, 0, 400, 400);
}
var width = 200;
var height = 100;
ctx.globalAlpha = 0.4;
ctx.font = "100px serif";
ctx.fillText("hello friends", 50, 90);
for (var i = 0; i < 2; i++)
{
ctx.globalAlpha = 0.5;
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, width, height);
ctx.globalAlpha = 0.6;
ctx.strokeStyle = 'blue';
ctx.strokeRect(10, 10, width, height);
ctx.scale(0.5, 0.5);
ctx.translate(10 + width * 2, 10 + height * 2);
}
});
</script>
</head>
<body>
<canvas id="foo" width="1000" height="1000"></canvas>
</body>
</html>

1
Base/res/html/misc/welcome.html
View file

@ -201,6 +201,7 @@
<li><a href="canvas-path.html">canvas path house!</a></li>
<li><a href="canvas-clip-path.html">canvas clip paths</a></li>
<li><a href="trigonometry.html">canvas + trigonometry functions</a></li>
<li><a href="canvas-global-alpha.html">canvas globalAlpha</a></li>
<li><a href="canvas-path2d.html">Path2D</a></li>
<li><a href="webgl-clear-color-and-multiple-contexts.html">WebGL Demo - Multiple Contexts and glClear(Color)</a></li>
<li><h3>Wasm</h3></li>