How to resize canvas to the size of Background Image..?

[Naveen Kumar]

I've added a background image as

var img = new Image();

img.src = 'img/1.png';

        

var options = {

      // Make Transparent fill

      secondaryColor : 'hsla(0, 0%, 100%, 0)',

      backgroundShapes : [LC.createShape('Image', {x: 0, y: 0, image: img})]

};

        

var lc = LC.init(document.getElementsByClassName('literally core')[0], options);

By default, the canvas has min-height of 400px as defined in LC css and width is of entire screen width. I need to resize the canvas to exactly the height and width of Background image.

If BG image is 700 x 392, I need my canvas to be of 700 x 392 (width & height respectively). I can't seem to find any API's to achieve this.

Am I missing any available API or this have to controlled manually by getting the width & height of image and then restricting canvas size to that size..?

Small example to achieve this is appreciated.

[Eray Hangül]

Hi,

I also needed this feature. I examined the https://github.com/literallycanvas/literallycanvas-demos/blob/master/classic_without_gui/index.html sample from github.

In this sample at CSS side this part sets the exactly width and height of literally canvas element.

 .literally {

        width: 960px;

        height: 540px;

      }

For example i also use snapshots @ 960x540 and dynamically css attributes listed above must be changed and the canvas area must be reloaded asynchronously (wt. AJAX i mean). So, i also could not find any solution towards literal canvas API.

Although i changed imageSize value at LC.init phase like that (LC.init(element, {imageSize: {width: 960, height: 540}})) and i gave alert's to be sure about changing the width and height variables @ literallycanvas-core.js @ function LiterallyCanvas(arg1, arg2) {, this didn't affect. 

Now, i have the problem about positioning the backgorund image to 0,0 - TopLeft corner exactly. Although i set like below, background picture aligns @ bigger Y coordinates as seen @ attachment :

var img = new Image();

img.src = '/sergoz/sergoz-data/17-06-2016__13-35-16.jpg';

lc.saveShape(LC.createShape('Image', {x: 0, y: 0, scale : 1.0, image: img}));

Any ideas? Best regards,

Eray

[sync]

I need this feature as well.