first try:show canvas selected area

-

 <div class="info">

    <p class="points-info">No points yet</p>
    <input type="text" placeholder="Image URL">
</div>
<div class="output">
   
    <canvas id="canvas" width="500" height="500" style="border: 1px solid black;"></canvas>
<p id="coordinates"></p>

</div>
<style>
canvas {
    width: 500px;
    height: 500px;
    display: inline-block;
    border: 3px solid #333;
    background-size: cover;
    cursor: crosshair;
}

.zoom {
    width: 100px;
    height: 100px;
    border: 3px solid #333;
    background-size: fill;
    border-radius: 50px;
    cursor: crosshair;
}

.magnify {
    width: 100px;
    height: 100px;
    background: black;
    background-size: 400%;
    border: 2px solid #333;
}
.magnify-dot {
   
}
</style>

<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var points = [];
var selectedPointIndex = null;

canvas.addEventListener('mousedown', function(event) {
    var x = event.offsetX;
    var y = event.offsetY;

    // Check if a point is clicked
    points.forEach(function(point, index) {
        if (Math.abs(x - point.x) < 5 && Math.abs(y - point.y) < 5) {
            selectedPointIndex = index;
        }
    });

    // If no point is clicked, create a new point
    if (selectedPointIndex === null) {
        points.push({x: x, y: y});
        draw();
    }
});

canvas.addEventListener('mousemove', function(event) {
    if (selectedPointIndex === null) return;
    points[selectedPointIndex].x = event.offsetX;
    points[selectedPointIndex].y = event.offsetY;
    draw();
});

canvas.addEventListener('mouseup', function(event) {
    selectedPointIndex = null;
    printCoordinates();
});

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    points.forEach(function(point, index) {
        ctx.arc(point.x, point.y, 5, 0, 2*Math.PI);
        if (index === 0) {
            ctx.moveTo(point.x, point.y);
        } else {
            ctx.lineTo(point.x, point.y);
        }
    });
    ctx.closePath();
    ctx.stroke();
}

function printCoordinates() {
    var coordinatesElement = document.getElementById('coordinates');
    var coordinatesString = points.map(function(point) {
        return '(' + point.x + ', ' + point.y + ')';
    }).join(', ');
    coordinatesElement.textContent = coordinatesString;
}

</script>

Comments

Post a Comment

Popular posts from this blog

WR3D wwe 2k19 MOD apk direct download link for Android

-
Image
If you want to download WR3D 2k19 apk for your android then you come at right place. Here you can download WR3D WWE 2k19 for Android with direct download link. Download WR3D 2k19 apk WR3D 2k19 for Android WR3D 2k19 is a MOD of Wrestling Revolution 3D game that is available on the Google play store. But the play store version of WR3D doesn't have characters like John Cena,The Undertaker, Seth Rollins, Brock lesnar, Triple H etc. and no arena/stadium like Wrestlemania, Money in the Bank, Battleground, Fastlane because WR3D's developer don't have any rights to include these in their game. So to solve this problem some developers starts creating WR3D MOD that includes real arena, characters by doing some modification and made it look like real WWE licences game available to play for free of cost. So, if you want to download "WR3D wwe 2k19 MOD apk with direct download link for Android" scroll down the page and download WR3D 2k19 MOD free. Key featu...
Read more

Download wwe2k17 wr3d

-
Image
Wwe 2k17 wr3d download with new Arena Wrestling 3D is a wrestling game. It is very popular game for Android. It is the biggest 3D wrestling sim on mobile featuring up to 20 wrestlers on lscreen. The “Wrestling Revolution” rumbles into the 3rd dimension, where it now features BOTH aspects of the business in ONE epic universe. Someone made its MOD and convert this game into WWE 2K17. It is a 60 MB game. The graphics of game is very nice and it is in 3D. Direct mediafire Download link of " WR3D 2k17 " is at bottom of this post I have some gameplay screenshots of " WR3D 2k17 " installed on my mobile The game contains popular wrestlers like John Cena, Brock Lesnar, Triple H, Seth rollins shawn Michaels, the Undertaker and more and many more other wrestlers of WWE. You can also play this game on low RAM mobile. It contains many signature moves of wrestlers. I also play this game and enjoy it. I I...
Read more

Top 5 best Professional video editing apps for Andoid

-
Image
Video editing is one of the most heaviest task on mobile. For editing a video, you need many features like filters, cropping, stickers, text editing, combining video, put music into videos. So, if you are want to make videos for YouTube or other purpose. I have some great video editing apps. I have personally used these. These apps helps me a lot and I hope it also helps for your videos. T op 5 vest video editing Apps for Android: 1. Kinemaster Kinemaster is a professional video editing app. It also have function of chroma key. But it is work on 1080p resolution screen mobile. By the help of chroma key, you can change your video's background. It also have many more features like add photo, video layer, add sound, add stickers, add text, crop videos. It is the best video editing app for mobile. You can also decide the quality of videos. Once your editing is finish, you can save video in internal storage or SD card without internet.. It is a free app and available on Goog...
Read more