skip to Main Content

I have a Canvas setup as follows:

<canvas id="canvas" style="width: 1200px; height: 500px;"></canvas>

I then want to upload a file and add it to the canvas, but drawn using a specific width and height, as follows:

var fileReader = new FileReader();

fileReader.onload = function( event ){
    var image = new Image();

    image.onload = function() {
        canvasCtx.drawImage( image, 0, 0, 400, 200 );
    };

    image.src = event.target.result;
}

fileReader.readAsDataURL( file );

This image is added but it is using the full width and height of the canvas. I’ve tried scaling it, but can’t seem to get it working.

2

Answers


  1. Canvas size is set by defining width and height properties:

    <canvas id="canvas" width="1200" height="500"></canvas>
    

    That’s the size of two-dimensional context and you can draw on this canvas. It’s always in points. Otherwise you might use relative units, eg. percents:

    <canvas id="canvas" style="width: 100%; height: 100%;"></canvas>
    

    How to draw on such canvas? How to determine where to put an image? That’s why there is a difference between how big is a drawing context, and how to place the canvas in webpage.

    You can set the canvas to be 1200×500 and resize it to fit the parent container at the same time:

    <canvas id="canvas" width="1200" height="500" style="width: 100%; height: 100%;"></canvas>
    

    I hope it clears up your doubts.

    Login or Signup to reply.
  2. drawImage method has 9 parameters.

    drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
    

    You can stretch the image in given sizes like this:

    canvasCtx.drawImage( image, 0, 0, image.width, image.height, 0, 0, 400, 200);
    

    Check https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage for more information.

    Also, you should set width and height your canvas object for proper view. Proper code sample:

    const fileReader = new FileReader();
    const {width, height} = document.getElementById('container').getBoundingClientRect();
    const canvas = document.getElementById('canvas');
    canvas.width = width;
    canvas.height = height;
    const canvasCtx = document.getElementById('canvas').getContext('2d');
    
    fileReader.onload = function( event ){
        const image = new Image();
    
        image.onload = function() {
            const ratio = Math.max(image.width/400, image.height/200)
            canvasCtx.drawImage( image, 0, 0, image.width, image.height, 0, 0, image.width/ratio, image.height/ratio);
        };
    
        image.src = event.target.result;
    }
    
    function handleFile() {
        const file = document.querySelector("input[type=file]").files[0];
        fileReader.readAsDataURL( file );
    }
    html,  body {
        color: #222;
        background: #bbb;
        font: 14px monospace;
        user-select: none;
    }
    
    canvas {
       background: #fff;
    }
    <div>
        <input type="file" accept="image/*" onchange="handleFile()"/>
        <div id="container" style="width: 1200px; height: 500px;">
          <canvas id="canvas"></canvas>
        </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search