show active canvas on camera

-

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show toggle</title>
    <style>
        .img-canvas-container {
            position: relative;
            width: 500px;
            height: 500px;
        }

        .img-canvas-container img, .img-canvas-container canvas {
            position: absolute;
            top: 0;
            left: 0;
        }

        canvas {
            border: 3px solid #333;
            background-size: cover;
            cursor: crosshair;
            opacity: 0.5;
            display: none;
        }
    </style>
</head>
<body>
    {% for d in data %}
    <div class="img-canvas-container">
        <img id="image{{ loop.index }}" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1300px-Image_created_with_a_mobile_phone.png" width="500" height="500">
        <canvas id="canvas{{ loop.index }}" width="500" height="500"></canvas>
    </div>
    {% endfor %}
    <script>
        window.onload = function() {
            {% for d in data %}
            (function() {
                var canvas = document.getElementById('canvas{{ loop.index }}');
                var ctx = canvas.getContext('2d');

                canvas.style.display = 'block';

                // Start drawing on the canvas
                ctx.beginPath();

                // Move to first coordinate
                ctx.moveTo(50, 50);

                // Draw lines to each coordinate
                ctx.lineTo(200, 50);
                ctx.lineTo(350, 50);
                ctx.lineTo(450, 250);
                ctx.lineTo(350, 450);
                ctx.lineTo(200, 450);
                ctx.lineTo(50, 450);
                ctx.lineTo(50, 250);

                // Close the path
                ctx.closePath();

                // Set the color of the shape
                ctx.fillStyle = 'red';

                // Fill the shape with the color
                ctx.fill();
            })();
            {% endfor %}
        }
    </script>
</body>
</html>

Comments

Post a Comment