mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-27 10:07:15 +02:00
62ae4e878f
We already had the API, but drawing to the canvas was not affected by any created CanvasPattern. This moves CanvasPatternPaintStyle to LibGfx so we don't have to reach into LibWeb, and implements the plumbing to let Skia use images as a fill pattern.
36 lines
963 B
HTML
36 lines
963 B
HTML
<!DOCTYPE html>
|
|
<link rel="match" href="../expected/canvas-pattern-ref.html" />
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
background-color: white;
|
|
}
|
|
|
|
canvas {
|
|
border: 2px solid black;
|
|
margin: 5px;
|
|
padding: 5px;
|
|
}
|
|
</style>
|
|
|
|
<canvas data-type="img" data-repeat="repeat" width="250" height="250"></canvas>
|
|
<canvas data-type="img" data-repeat="repeat-x" width="250" height="250"></canvas>
|
|
<canvas data-type="img" data-repeat="repeat-y" width="250" height="250"></canvas>
|
|
<canvas data-type="img" data-repeat="no-repeat" width="250" height="250"></canvas>
|
|
|
|
<script>
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
for (const canvas of document.querySelectorAll('canvas[data-type=img]')) {
|
|
const ctx = canvas.getContext('2d');
|
|
const pattern = ctx.createPattern(img, canvas.getAttribute('data-repeat'));
|
|
ctx.fillStyle = pattern;
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
}
|
|
};
|
|
img.src = '../data/car.png';
|
|
</script>
|