Setting Image Size inside Canvas with JS

Question

Hello Everyone,
So there is a HTML Canvas with photo editing tool. Which looks like this -

<div class="col-md-12 col-lg-8 col-sm-12" id="mainDiv">
  <div 
    id="canvas1Div" 
    data-toggle="tooltip" 
    title="" 
    data-original-title="Image Processing Area"
  >
    <canvas id="canvas1" width="564" height="488"> </canvas>
  </div>
  <div
    id="canvasDiv" 
    data-toggle="tooltip" 
    data-original-title="" 
    title="" 
    style="border: 0px;"
  >
    <canvas id="canvas3" width="188" height="240"> </canvas>
    <canvas
      id="canvas4" 
      width="188" 
      height="240" 
      style="width: 188px; height: 240px;"
    > </canvas>
  </div>
</div>

So could it be possilbe with JavaScript that the photo I choose can fit to the center part of the canvas (colorfull borders) by executing it on the console of the browser?
Thank you.

developer.mozilla.org/en-US/docs/Web/API/…

Darth
– Darth

2021-11-11 11:41:18 +00:00
Commented Nov 11, 2021 at 11:41 — Darth
– Darth, Commented Nov 11, 2021 at 11:41

felgro · Accepted Answer · 2021-11-13 10:56:53Z

3

Try adding the image on the canvas using this approach:

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

sx, sy, sWidth & sHeight are used for cropping the image
dx, dy, dWidth & dHeight are used for positioning the image within the canvas. These arguments should correlate with your desired rect position and size.

To learn more on this checkout this link: CanvasRenderingContext2D.drawImage()

Edit

Use the native Image class to import any image from your pc:

const image = new Image(width, height);

// render image on canvas when it‘s done loading
image.onload = () => ctx.drawImage(image, …);

// load the image
image.src = './path/to/image.png';

edited Nov 13, 2021 at 10:56

answered Nov 11, 2021 at 12:05

felgro

715 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ygssoni Over a year ago

I am browsing the image from the pc. What should I use in place of "image" variable?

Collectives™ on Stack Overflow

Setting Image Size inside Canvas with JS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related