How to fit image in img tag? [SOLVED]

1

pen: [ http://codepen.io/ustvarno/pen/yJWJox?editors=0010 ]
i’m creating puzzle, and want to have canvases in grid
I want to draw cropped section of original image into right canvas respectively
Can u take a look into my code to see where is issue
It may be something with fitting in image in img tag
On one side i have predefined width and hegiht on img tag in javascript
So if image from url is large or smaller, it will be fitted?
Then i use parameters in drawImage function to crop image and draw it to canvas…

EDIT: solved by

First i create new variables
two for (abstract) size for img that is parameter for src
( imgWidthOffset , imgHeightOffset )
two for size of node (canvas) that is part of grid
( nodeWidth, nodeHeight )

And here i messed up with arguments first it was like this:

ctx.drawImage(img, y * imgWidthOffset,
                           i * imgHeightOffset,
                           (y+1) * imgWidthOffset,
                           (i+1) * imgHeightOffset,
                           0,0, nodeWidth, nodeHeight);

I was thinking fourth and fifth arg is right bottom coords for desired crop rect, but it is just width and height so this fix the thing:

ctx.drawImage(img, y * imgWidthOffset,
                   i * imgHeightOffset,
                   imgWidthOffset,
                   imgHeightOffset,
                   0,0, nodeWidth, nodeHeight);