mirror of
https://github.com/RGBCube/serenity
synced 2025-05-25 16:25:08 +00:00
39855fe9ef
Add an implementation of CanvasRenderingContext2DWrapper.strokeRect(). While implementing this I fixed fillRect() and the new strokeRect() to honor the .scale() and .translate() values that had previously been plumbed. Also enhance the canvas.html demo to utilize strokeRect(), scale(), and translate().
39 lines
922 B
HTML
39 lines
922 B
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Canvas 2D test!</title>
|
|
<style type="text/css">
|
|
body {
|
|
background-color: #000;
|
|
color: #fff; /* another css comment */
|
|
}
|
|
canvas {
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: #fff;
|
|
}
|
|
</style>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
ctx = document.getElementById("foo").getContext("2d");
|
|
|
|
var width = 200;
|
|
var height = 100;
|
|
for (var i = 0; i < 2; i++)
|
|
{
|
|
ctx.fillStyle = 'red';
|
|
ctx.fillRect(10, 10, width, height);
|
|
|
|
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 link="#44f" vlink="#c4c" background="90s-bg.png">
|
|
<canvas id="foo" width="300" height="200"></canvas>
|
|
</body>
|
|
</html>
|