Beispiel:JS-canvas-shadow.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0;" />
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<link rel="stylesheet" media="screen" href="Grundlayout.css" />
<title>Schatten mit Canvas</title>
<style>
canvas {background:white; border:1px solid #333;}
</style>
<script>
'use strict';
(function () {
function draw() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.rect(0, 0, 500, 300);
context.fillStyle= '#dfac20';
context.shadowBlur= 20;
context.shadowColor= 'black';
context.fillRect(canvas.width / 2 -75, canvas.height / 2 +50, 150, 30);
context.fillStyle= '#c32e04';
context.font = '60px Arial';
context.textBaseline = 'middle';
context.textAlign = 'center';
context.fillText('Hallo!', canvas.width / 2, canvas.height / 2);
}
document.addEventListener(
"DOMContentLoaded",
function () { draw(); }
);
}());
</script>
</head>
<body>
<h1>Schatten mit Canvas</h1>
<main>
<canvas id="canvas" width="500" height="300">Beispiel für Schatten in Canvas.</canvas>
</main>
</body>
</html>
