mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-10-24 08:59:50 +00:00
a5a84159a3
input-placeholder-ref was modified because the input box ends up being slightly wider outside of quirks mode.
148 lines
3.6 KiB
HTML
148 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="match" href="../expected/canvas-stroke-styles-ref.html" />
|
|
<canvas id="canvas" width="400" height="350"></canvas>
|
|
<style>
|
|
#canvas {
|
|
border: 1px solid black;
|
|
}
|
|
|
|
body {
|
|
background: white;
|
|
}
|
|
</style>
|
|
<script>
|
|
const canvas = document.getElementById("canvas");
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
// Line styles
|
|
ctx.lineWidth = 10;
|
|
|
|
// Butt cap (default)
|
|
ctx.lineCap = "butt";
|
|
ctx.beginPath();
|
|
ctx.moveTo(20, 30);
|
|
ctx.lineTo(100, 30);
|
|
ctx.stroke();
|
|
|
|
// Butt cap, zero length path
|
|
ctx.beginPath();
|
|
ctx.moveTo(120, 30);
|
|
ctx.lineTo(120, 30);
|
|
ctx.stroke();
|
|
|
|
// Round cap
|
|
ctx.lineCap = "round";
|
|
ctx.beginPath();
|
|
ctx.moveTo(20, 75);
|
|
ctx.lineTo(100, 75);
|
|
ctx.stroke();
|
|
|
|
// Round cap, zero length path
|
|
ctx.beginPath();
|
|
ctx.moveTo(120, 75);
|
|
ctx.lineTo(120, 75);
|
|
ctx.stroke();
|
|
|
|
// Square cap
|
|
ctx.lineCap = "square";
|
|
ctx.beginPath();
|
|
ctx.moveTo(20, 120);
|
|
ctx.lineTo(100, 120);
|
|
ctx.stroke();
|
|
|
|
// Square cap, zero length path
|
|
ctx.beginPath();
|
|
ctx.moveTo(120, 120);
|
|
ctx.lineTo(120, 120);
|
|
ctx.stroke();
|
|
|
|
// Open path
|
|
ctx.lineCap = "butt";
|
|
ctx.beginPath();
|
|
ctx.moveTo(150, 50);
|
|
ctx.lineTo(250, 50);
|
|
ctx.lineTo(200, 100);
|
|
ctx.lineTo(150, 50);
|
|
ctx.stroke();
|
|
|
|
// Closed path with round lineJoin
|
|
ctx.lineCap = "butt";
|
|
ctx.lineJoin = "round";
|
|
ctx.beginPath();
|
|
ctx.moveTo(300, 50);
|
|
ctx.lineTo(350, 100);
|
|
ctx.lineTo(250, 100);
|
|
ctx.lineTo(300, 50);
|
|
ctx.closePath();
|
|
ctx.stroke();
|
|
|
|
// Miter limit test.
|
|
ctx.lineWidth = 5;
|
|
ctx.lineJoin = "miter";
|
|
ctx.beginPath();
|
|
ctx.moveTo(380, 100);
|
|
ctx.lineTo(385, 20);
|
|
ctx.lineTo(390, 100);
|
|
ctx.stroke();
|
|
|
|
ctx.miterLimit = 20;
|
|
ctx.beginPath();
|
|
ctx.moveTo(380, 230);
|
|
ctx.lineTo(385, 150);
|
|
ctx.lineTo(390, 230);
|
|
ctx.stroke();
|
|
|
|
// Different angles, butt caps
|
|
ctx.lineCap = "butt";
|
|
ctx.lineWidth = 5;
|
|
|
|
let centerX = 100;
|
|
const centerY = 230;
|
|
const innerRadius = 50;
|
|
const outerRadius = 80;
|
|
|
|
for (let angle = 0; angle < 360; angle += 15) {
|
|
const radians = (angle * Math.PI) / 180;
|
|
const startX = centerX + innerRadius * Math.cos(radians);
|
|
const startY = centerY + innerRadius * Math.sin(radians);
|
|
const endX = centerX + outerRadius * Math.cos(radians);
|
|
const endY = centerY + outerRadius * Math.sin(radians);
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(startX, startY);
|
|
ctx.lineTo(endX, endY);
|
|
ctx.stroke();
|
|
}
|
|
|
|
// Circles with different dashes
|
|
let dashes = [[15, 3, 3, 3, 3, 3, 3, 3], [1], [12, 3, 3]];
|
|
for (let r = innerRadius - 10, i = 0; r >= 10; r -= 10, i++) {
|
|
ctx.beginPath();
|
|
ctx.arc(centerX, centerY, r, 0, 2 * Math.PI);
|
|
ctx.closePath();
|
|
ctx.setLineDash(dashes[i % dashes.length]);
|
|
ctx.lineDashOffset = (r - 30) / 2;
|
|
ctx.stroke();
|
|
}
|
|
ctx.setLineDash([]);
|
|
ctx.lineDashOffset = 0;
|
|
|
|
// Different angles, round caps
|
|
ctx.lineCap = "round";
|
|
ctx.lineWidth = 5;
|
|
|
|
centerX = 280;
|
|
|
|
for (let angle = 0; angle < 360; angle += 15) {
|
|
const radians = (angle * Math.PI) / 180;
|
|
const startX = centerX + innerRadius * Math.cos(radians);
|
|
const startY = centerY + innerRadius * Math.sin(radians);
|
|
const endX = centerX + outerRadius * Math.cos(radians);
|
|
const endY = centerY + outerRadius * Math.sin(radians);
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(startX, startY);
|
|
ctx.lineTo(endX, endY);
|
|
ctx.stroke();
|
|
}
|
|
</script>
|