Html Question posted in
Some basic documentation can be found here.

Draw image inside HTML canvas using specific width/height

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.

Tags:

2

Answers


  1. 0

    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. 0

    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