I'm drawing a chart to an in-memory canvas with strictly defined width and height, I'm then converting this canvas to base 64 using toDataUrl(). Everything was working fine until I use my code on a high density screen (Full HD notebook), where the Windows' Display, Scale and Layout > Change the size of text, apps, and other items option was at 125%, with this config, Chart.js is automatically resizing my canvas to 125% of its original size.
Is this a bug or a feature that I can disable?
Presumably the option you need is devicePixelRatio, which will:
Override the window's default devicePixelRatio.
I've not tested it, and the documentation isn't 100% clear, but I assume this goes in the root of the options object:
options: {
devicePixelRatio: 1
}
Related
Given: A local HTML page (in assets) that contains an SVG and a Rect of certain sizes in it. The page is loaded when the application starts in the WebView.
How to zoom in to this Rect dynamically while the application is running so that it occupies the entire visible area of the screen using WebView.zoomBy or JS?
P.S. I tried to calculate the ratio of zoom to the areas of rectangles, manipulations with JS and WebView, but maybe I was thinking wrong.
Thank you!
Illustration:
Illustration
Found a solution by calculating the required scale depending on the aspect ratio and display dimensions and the zoom factor for webView.zoomBy().
I have set a fixed height for a div, let's say:
div.box {
height: 250px;
}
Using a tool (Meazure) which measures the pixels of the screen, I've noticed that on my desktop PC, which has a monitor of 1680x1050 pixels resolution, the pixels of the box are 250px (the right value); however, in my laptop, which has a 1920x1280 resolution display, the pixels measured using Meazure are different! It shows 539 pixels...
The same thing happens for offset values given in pixels... I notice different behaviours among different screens and devices (on my smartphone this effect is much more amplified...)
How can I set a "fixed" value which will appear the same for every device?
(Note: I don't want to use 100% for the width, since I want the box to have a fixed value even after resizing the window).
How can I set a "fixed" value which will appear the same for every device?
That's the thing, though: a "fixed" pixel value wouldn't appear the same on every device, because high-density screens are a thing that exists.
That 250px box that looks fine on a 72ppi screen would be itsy-bitsy on a high density 300ppi screen (specifically it'd be 24% of the intended size.) Browsers compensate for this using the device pixel ratio to adjust the specified pixel value to an appropriate size for that screen on that device. (Your 'meazure' tool doesn't appear to be taking this pixel ratio into account, which would seem to rather limit its usefulness, as it will only give accurate results on a traditional low-density screen.)
In theory you could undo this by multiplying the size of an element by the inverse of the current devicePixelRatio, but the result would be the opposite of what you want: the elements would have the same number of physical pixels, but would look completely different sizes on each device.
In practice it's mostly safe to ignore that this is happening at all and trust the browser to adjust your specified sizes correctly. (Take measurements using a density-aware tool, or the browser's own developer tools.) The only case where you really need to take this into account is if you include high-resolution bitmap images for use on higher-density screens; in those cases you'd use #media queries to determine which image the browser should use, such as
#media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
/* 2x-res images here */
}
/* low-res images here */
(the -webkit prefixed value is, of course, vendor-specific; resolution is the not-yet-universally-supported standard.)
I would first suggest to first check actual CSS properties. Right button -> inspect element and to see if on your PC and laptop div.box height is actually set to 250px
Maybe due to different resolutions, different styles are being applied.
If you have a www. page to look at, post it in comments
I've been wondering if there was a way to change the zoom on an html webpage according to the monitor size. For example, a 500px by 500px image would look big on a laptop although a monitor for a PC would make it look small. Is there possible solution I can make so that the picture scales in size as the monitor size changes?
Also, I would like the screen to just zoom not change in pixels.
Thanks!
You could use % instead of px to set the size of the image.
In HTML 4.01, the width could be defined in pixels or in % of the containing element. In HTML5, the value must be in pixels.
source: https://www.w3schools.com/tags/att_img_width.asp
Or in CSS you could use Media Queries to have different style depending on the device used.
I'm working on an SVG and so far all is well, except for one issue.
Normally, in the absence of width/height attributes on the root element, the SVG will scale to fill the viewport.
However on mobile, I notice that changing orientation breaks this functionality. When rotating from portrait to landscape, the original screen width becomes the width of the viewport and the SVG goes way off the bottom. Rotating back gives the opposite problem, resulting in a very small SVG.
This does not happen on desktop, when resizing the browser window - the SVG correctly adjusts its scale so it fills the available space.
How can I force the SVG scale to recalculate correctly when screen orientation changes?
The issue has been resolved by forcing a redraw. This can be done by performing any operation that causes the SVG to change somehow, even if that "change" is a no-op.
In this case...
window.addEventListener('resize',function() {
svg.setAttribute("x",0);
});
... worked just fine.
I'm building a authoring tool in FabricJS which is meant to export something for android devices. It's decided that I will support only 6/9 screen ratio (other screens will get black borders).
My problem is that I open the page on my pc, add and edit some elements and export ( using the fabricjs serializer ) and then I open on a laptop (different display size), the canvas gets resized correctly (with some js magic) but the elements are still at the same location and same size as on the big display
.
The problem is that FabricJS does not create elements relative to canvas size.
I can write my own export/load functions, but it feels wrong because each element has width, height, scaleX and scaleY. Using the handles changes the scale for some reason. This leads me to think that there is something like a canvas scale, but there is not.
Am I missing something? How does one go about exporting and then opening on a different screen, but maintaining the canvas ratio and having elements relative to the canvas size.