I made a preview dialog containing fabric.js canvas. It can be opened by clicking on "Preview" button for each item in a list. Each item in a list is associated with function which draws preview on this canvas. The preview canvas has width/height 90% of the browser screen. Is this a way to center this drawing on the fabric.js canvas (both horizontally and vertically)? Also is there a way to scale it so that it fits within canvas no matter what display size user has? The sizes of drawings are known. But I can't find how I can get canvas width/height from fabric.js and in what measures.
Tried to find the answer in fabric.js docs. I need to get fabric.js canvas width and height.
I have an SVG (https://drive.google.com/open?id=1SBA2Xsi228agUO65FmtLwjg6Zuoq59-5) which is shifted. I have tried to change parameters such as width, height, viewBox, and transform attributes. I do not have a clear understanding of this area and it is not as simple as I estimated. I need to draw only the below part and remove the padding.
I do not want to use JS for this. Everything should be in the SVG file and I use it in the tag. The SVG file should not hard code the width and height and should scale as per the tag. It appears that the SVG file draws with left padding by default. I am trying to find the line in SVG that does it.
I have svg rectangles animate from bottom to top and out of the border of the svg. In some resolutions and browsers there is a pixel line building up on top. Sort of like a smear-effect.
I change colors, opacity and sizes of the svg, but the problem consists.
see code in action:
https://codepen.io/anon/pen/ydYdpX
I have my my FabricJS canvas inside a container with a fixed height/width in pixels. On the side I have a dropdown to change the canvas size to various presets. What I would like to do is automatically zoom out whenever I select a size that is either taller and/or wider than the container. So for example, if my container div is 800x600 and I select a canvas size of 1024x768, I want to zoom out so that the entire canvas is still visible. Conversely, I'd like to zoom in up to 100% if I select a smaller size (e.g. 200x200).
I found this example of zooming, but no matter how much you zoom out, the canvas size appears to stay the same. See screenshot:
How can I accomplish this?
As you can see here, the area with the thin red border is the canvas container. The white box is the canvas.
You can use the canvas.setDimensions function to accomplish this. You pass two arguments to it; the first is an object specifying the height and width to change the canvas to and the second indicates whether to change the css, the actual size of the canvas, or both.
For example,canvas.setDimensions({width: 750, height: 750}, {backstoreOnly: true} will set the actual size of the canvas to be 750x750, regardless of the display.
canvas.setDimensions({width: '750px', height: '750px'}, {cssOnly: true}) will set the display size of the canvas to be 750x750, regardless of the actual size.
I'm not 100% sure whether the width or height require a px after it for css or for backstore, but that's a pretty simple thing to check. Also, if no argument is passed for the second parameter, it will change both.
The slider images that I use is not the same width and height as the NivoSlider div.
I want my images to scale into the exact width and height of the NivoSlider div, with no losing any part of the image. How can i do this?
I am using the v3.2 JQuery plugin, not Wordpress.
You could do this in photoshop, but its hard if its not the same ratio, you will lose pixels
what you could do is resize the slider or edit the photo's