How to adjust the size of the canvas?

Question

I'm trying to show a photo taken from the web camera. However the sizes does not match. I'm not sure in which file the size is defined.

On the left is camera and on the right the photo. I want to make the photo exactly the same size as the camera, but I don't know where is it. Because I tried changing it in every possible way. Here are the files where I tried doing it.

Javascript file:

document.addEventListener("DOMContentLoaded", function () {

    const video = document.getElementById('video-display');
    const canvas = document.getElementById('canvas-photo');
    const errorMsgElement = document.querySelector('span#errorMsg');
    const context = canvas.getContext('2d');
    const photo_button = document.getElementById('photo-button');

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
        navigator.msGetUserMedia || navigator.oGetUserMedia;

    if (navigator.getUserMedia) {
        navigator.getUserMedia({
            video: true,
            audio:false
        }, handleVideo, videoError);
    }

    function handleVideo(stream) {
        window.stream = stream;
        video.srcObject = stream;
        video.play();

    }

    function videoError(e) {
        alert("Something went wrong");
    }

    photo_button.addEventListener("click", function () {
        context.drawImage(video, 0, 0, 300, 150);
        context.imageSmoothingEnabled = true;
        let html = `
<button id="predict-button" type="submit" value="Rozpoznaj">Rozpoznaj</button>`;
        document.querySelector('#predict-button-div').innerHTML = html;
        const predict_button = document.getElementById('predict-button');
        let image = canvas.toDataURL('image/jpeg');
        let date = new Date().toLocaleString();
                predict_button.addEventListener("click", function () {
            $.ajax({
    url         : "/",
    method      : "post",
    contentType : 'application/json',
    dataType    : 'html',
    data        : JSON.stringify({ "imageData": canvas.toDataURL('image/jpeg'), "name" : date })
});
        })
    })
})

HTML file:

<!DOCTYPE html>
<html>

<head>
    <title>Warzywaniak</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="static/js/camera.js?newversion"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="static/css/camera.css">
    <link rel="shortcut icon" href="{{url_for('static', filename = 'images/favicon.ico')}}">

</head>

<body>
    <div class="container-main">
        <div class="container-header">
            <header class="header">
                <a class="link-title" href="/">Zgadnij co to!</a>
            </header>
        </div>
        <div id="camera">
            <video id="video-display" autoplay="true">
                Nie ma możliwości zrobienia zdjęcia
            </video>
            <div id="photo-button-div">
                <button id="photo-button">Zrób zdjęcie</button>
            </div> 
        </div>
        <div id="photo">
             <canvas id="canvas-photo"></canvas>
            <div id="predict-button-div"></div>
        </div>

    </div>


</body>

</html>

CSS file:

.header a {
    text-decoration: none;
    color: #FFFFFF;
    font-size: 3.5em;
    font-weight: bold;
    font-family: Apple Chancery, cursive;
}

.container-header {
    background-color: #4CAF50;
    height: 60px;
    width: auto;
    padding: 20px 20px 40px 20px;
    margin: 15px;
}

.container-main {
    margin: 15px;
}

#camera {
    width: 50%;

    height: auto;
    text-align: center;
    float:left;
}
#photo {
    width: 50%;
    margin:0 auto;
    height: auto;
    text-align: center;
    float:right;

}

#video-display{
    width:auto;
    height:auto;
}

#photo-button-div{
    margin:10px;
    width:100%;
}

 #photo-button {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 150px;
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#predict-button-div{
    margin:10px;
}

#photo {
    float: right;
    width: 45%;
    height: auto;
    margin: 15px;

}

#canvas-photo{
    width:88%;
    height: auto;
    margin: 0 auto;
}

#predict-button{
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 150px;
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

I hope someone know where I can adjust the size of the photo.

Does this answer your question? [Canvas width and height in HTML5](https://stackoverflow.com/questions/4938346/canvas-width-and-height-in-html5) — ggorlen, Jan 02 '20 at 23:09
No, even if I change the size manually, on the page the size is still the same — Patrieszka, Jan 07 '20 at 18:45

score 0 · Answer 1 · answered Jan 03 '20 at 04:45

From the documentation:

While information about a user's cameras and microphones are inaccessible for privacy reasons, an application can request the camera and microphone capabilities it needs and wants, using additional constraints. ... The browser will try to honour this, but may return other resolutions if an exact match is not available, or the user overrides it.

The article also mentions that a specific size may be requested, but can cause the request to fail. I suppose, however, that once the video is obtained, the Canvas can be resized easily according to the size of the video.

How to adjust the size of the canvas?

1 Answers1