RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-28 16:15:10 +00:00
Code Issues Activity Actions

LibWeb: Add some basic path drawing functionality to the canvas element

Browse source 
This patch adds the following methods to CanvasRenderingContext2D:

- beginPath()
- moveTo(x, y)
- lineTo(x, y)
- closePath()
- stroke()

We also add the lineWidth property. :^)
This commit is contained in:
Andreas Kling 2020-04-16 21:06:03 +02:00
parent 60c2e41079
commit 0d93e249c3
6 changed files with 163 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

40
Base/home/anon/www/canvas-path.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head></title>
<body>
<canvas width=300 height=300></canvas>
<script>
function drawHouse() {
var ctx = document.querySelectorAll("canvas")[0].getContext("2d");
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, 300, 300);
ctx.fillStyle = 'white';
ctx.strokeStyle = 'red';
// Set line width
ctx.lineWidth = 10;
// Wall
ctx.strokeRect(75, 140, 150, 110);
// Door
ctx.fillRect(130, 190, 40, 60);
// Roof
ctx.beginPath();
ctx.moveTo(50, 140);
ctx.lineTo(150, 60);
ctx.lineTo(250, 140);
ctx.closePath();
ctx.stroke();
}
drawHouse();
</script>
</body>
</html>