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

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,...
Read more