mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-21 18:15:58 +00:00
45f86466bb
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>
58 lines
1.2 KiB
HTML
58 lines
1.2 KiB
HTML
<!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>
|