show canvas on image when button is clicked

-

 <div class="info">

    <p id="points-info">No points yet</p>
</div>
<div class="output">
    <img id="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png" width="500" height="500">
    <canvas id="canvas" width="500" height="500"></canvas>
    <p id="coordinates"></p>
</div>
<button id="show-canvas-btn">Show Canvas</button>

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

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

var img = new Image();
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png';

var points = [{x: 50, y: 50}, {x: 200, y: 50}, {x: 350, y: 50}, {x: 450, y: 250}, {x: 350, y: 450}, {x: 200, y: 450}, {x: 50, y: 450}, {x: 50, y: 250}];
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;
        }
    });
});

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.drawImage(img, 0, 0, canvas.width, canvas.height);

    // Set the globalAlpha for transparency
    ctx.globalAlpha = 0.5;

    // Set the fillStyle to a low-opacity purple color
    ctx.fillStyle = "rgba(128, 0, 128, 0.1)"; // rgba for purple is (128, 0, 128)

    // Draw a rectangle covering the entire canvas
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Reset the globalAlpha to 1 for full opacity
    ctx.globalAlpha = 1;

    // Draw the lines
    ctx.beginPath();
    ctx.moveTo(points[0].x, points[0].y);
    for (let i = 1; i < points.length; i++) {
        ctx.lineTo(points[i].x, points[i].y);
    }
    ctx.closePath();
    ctx.strokeStyle = 'red';
    ctx.stroke();

    // Draw the points
    points.forEach(function(point, index) {
        // Set the fillStyle to red for the points
        ctx.fillStyle = 'red';

        ctx.beginPath();
        ctx.arc(point.x, point.y, 5, 0, 2*Math.PI);
        ctx.fill();
        ctx.closePath();
    });
}

function printCoordinates() {
    var coordinatesElement = document.getElementById('coordinates');
    var coordinatesString = points.map(function(point) {
        return '(' + point.x + ', ' + point.y + ')';
    }).join(', ');
    coordinatesElement.textContent = coordinatesString;
    pointsInfo.textContent = points.length > 1 ? 'Points: ' + points.length : 'No points yet';
}

img.onload = function() {
    // Initial draw
    draw();
    printCoordinates();
};

document.getElementById('show-canvas-btn').addEventListener('click', function() {
    canvas.style.display = 'inline-block';
    document.getElementById('image').style.display = 'none';
});
</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

How to make resizeable window in pygame and make content adjustable according to window size

-
import pygame, sys   # Initialize Pygame pygame.init() # Set up the display screen_width = 800 screen_height = 600 screen_flags = pygame.RESIZABLE screen = pygame.display.set_mode((screen_width, screen_height), screen_flags) # Load the image and scale it to the initial size of the window image = pygame.image.load("image.png") image = pygame.transform.scale(image, (screen_width, screen_height)) # Set up the game loop while True:     # Handle events     for event in pygame.event.get():         if event.type == pygame.QUIT:             pygame.quit()             sys.exit()         elif event.type == pygame.VIDEORESIZE:             # Resize the window and the image             screen_width, screen_height = event.size             screen = pygame.display.set_mode((screen_width, screen_height), pygame.RESIZABLE)             image = pygame.transform.scale(image, (screen_width, screen_height))     # Draw everything to the screen     screen.blit(image, (0, 0))     pygame.display.flip()
Read more