Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Rounded Border and Text on Mouseup</title>
- <style>
- #canvas {
- display: block;
- background-color: #f0f0f0;
- margin: 20px auto;
- }
- </style>
- </head>
- <body>
- <canvas id="canvas" width="400" height="200"></canvas>
- <script>
- const canvas = document.getElementById('canvas');
- const context = canvas.getContext('2d');
- // Function to draw rounded rectangle with text on canvas
- function drawRoundedRectangleWithText(x, y, text) {
- const width = 200;
- const height = 100;
- const cornerRadius = 20;
- const borderWidth = 2;
- const fontSize = 30;
- context.strokeStyle = 'black';
- context.fillStyle = 'black';
- context.lineWidth = borderWidth;
- context.font = `${(fontSize * 0.7)}px Arial`; // Reduce the text size by 30 percent
- context.textAlign = 'center';
- context.textBaseline = 'middle';
- context.beginPath();
- context.moveTo(x + cornerRadius, y);
- context.arcTo(x + width, y, x + width, y + height, cornerRadius);
- context.arcTo(x + width, y + height, x, y + height, cornerRadius);
- context.arcTo(x, y + height, x, y, cornerRadius);
- context.arcTo(x, y, x + width, y, cornerRadius);
- context.closePath();
- context.stroke();
- context.fillText(text, x + width / 2, y + height / 2);
- }
- // Mouseup event listener
- canvas.addEventListener('mouseup', function(event) {
- const rect = canvas.getBoundingClientRect();
- const x = event.clientX - rect.left;
- const y = event.clientY - rect.top;
- drawRoundedRectangleWithText(x, y, 'Custom Text');
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement