Base: Add a little test web page for canvas drawImage() :^)

This commit is contained in:
Andreas Kling 2020-04-14 20:41:10 +02:00
parent 067ea5a2e0
commit aab022b77b
2 changed files with 29 additions and 0 deletions

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>canvas drawImage() test</title>
<style>
canvas {
border: 1px solid black;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
img = document.querySelectorAll("img")[0];
img.addEventListener("load", function() {
var ctx = document.querySelectorAll("canvas")[0].getContext("2d");
ctx.fillStyle = '#666';
ctx.fillRect(0, 0, 400, 400);
ctx.scale(2, 2);
ctx.drawImage(img, 30, 30);
});
});
</script>
</head>
<body>
<canvas width=400 height=400></canvas>
<img src="../../../res/icons/buggie.png">
</body>
</html>

View file

@ -28,6 +28,7 @@ span#ua {
<p>Your user agent is: <b><span id="ua"></span></b></p>
<p>Some small test pages:</p>
<ul>
<li><a href="img-canvas.html">canvas drawImage() test</a></li>
<li><a href="trigonometry.html">canvas + trigonometry functions</a></li>
<li><a href="qsa.html">querySelectorAll test</a></li>
<li><a href="innerHTML.html">innerHTML property test</a></li>