mirror of
https://github.com/RGBCube/serenity
synced 2025-07-25 02:27:35 +00:00
LibWeb: Add canvas.quadraticCurveTo()
Also adds a test, and removes debug spam ™️
This commit is contained in:
parent
9f3f98d4c0
commit
0a55679de4
7 changed files with 70 additions and 2 deletions
44
Base/home/anon/www/canvas-path-quadratic-curve.html
Normal file
44
Base/home/anon/www/canvas-path-quadratic-curve.html
Normal file
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>canvas path - quadratic curve example</title>
|
||||
</head>
|
||||
<body>
|
||||
<canvas width=500 height=500></canvas>
|
||||
<script>
|
||||
|
||||
function drawSomeCurves() {
|
||||
|
||||
var canvas = document.querySelectorAll("canvas")[0];
|
||||
var ctx = canvas.getContext("2d");
|
||||
var x = 150;
|
||||
var y = 150;
|
||||
|
||||
canvas.addEventListener("mousedown", function(e) {
|
||||
x = e.offsetX;
|
||||
y = e.offsetY;
|
||||
});
|
||||
|
||||
canvas.addEventListener("mousemove", function(e) {
|
||||
ctx.beginPath();
|
||||
ctx.fillStyle = 'white';
|
||||
ctx.fillRect(0, 0, 500, 500);
|
||||
|
||||
ctx.strokeStyle = 'red';
|
||||
|
||||
ctx.lineWidth = 1;
|
||||
|
||||
ctx.fillRect(0, 0, 500, 500);
|
||||
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.quadraticCurveTo(e.offsetX, e.offsetY, x, y);
|
||||
ctx.stroke();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
drawSomeCurves();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
Loading…
Add table
Add a link
Reference in a new issue