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>