CODEWITHSUNDEEP
javascripthtmlcanvas
ygssoni
ygssoni

Reputation: 7349

Setting Image Size inside Canvas with JS

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

enter image description here

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

Upvotes: 0

Views: 63

Answers (1)

felgro
felgro

Reputation: 71

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';

Upvotes: 3

Related Questions