Render canvas full screen on a monitor with a particular resolution - javascript

I have a monitor of size 800 x 480. I would like to render an HTML5 Canvas that fills the entire monitor in a full screen browser setting (no toolbar, dock, taskbar, browser window, etc) such that one pixel in canvas coordinate space corresponds exactly to one pixel in monitor coordinate space.
For example, I would like to ensure that canvas(0,0) corresponds physically to the top left pixel on the monitor.
Just making the canvas fill the width and height of the webpage doesn't make sense because the viewport isn't the same size as the entire monitor.
Would appreciate some advice on how to go about solving this.
Thanks!

Related

Mobile browser positions elements as if the view is 360px wide, but renders images on the page at a higher resolution. How does this work?

I was having a hard time figuring out how to phrase this. Sorry if this is a noob question, I'm new to responsive design and mobile web design in general.
My phone (Galaxy s10e) will render my webpage as if it's 360 pixels wide, with all elements positioned appropriately based on this width. I have several image tags on the site that are the same width. I was using src images that are 360px wide, and this looks fine on desktop because it is actually rendering my images at 360px, but on mobile the images alone appear to be rendering at a much higher resolution, causing it to look terrible due to upscaling.
If someone could explain to me what is happening here it would really help, since I can't find information on this specific behavior. Some questions I have:
Is the browser choosing to position the elements based on a 360px width while rendering the actual content at the screen's resolution?
How do I account for this in my design? I considered rendering the images at the higher resolution and then having the page dynamically scale those images down (so even though the actual div is 360px, the browser can use the 'extra space' allotted by max-width to render the image at a higher resolution), but I want the images to remain 360px wide on desktop, not the higher max-width for mobile rendering.
Where can I learn all about this behavior so I know how to tackle responsive image scaling in the future?
Thank you for your time. Let me know if you have any other questions. I'm using ReactJS to develop the site.
OK so in a nutshell pixels are relative sizes. One pixel is not literally one pixel on your phone.
What happens is PPI kicks in and basically zooms in to make things readable.
Because if you actually tried to view 360px on a phone with that pixel density you'd see nothing really.
So lets look at some phone specs:
6.1 INCH
5.90 x 2.77 x 0.31 INCH
Resolution 1440 x 3040 PX ~ 550 PIXELS PER INCH
Viewport 360 x 760 PX 138 PIXELS PER INCH
Now the viewport is what you actually see on screen. in this case it give you a pixel ratio of like 4. So that means your phone has a resolution 4 times that of it's viewport.
so for a web app where a div is set to 200px wide it will display 200px as you'd expect it based on the viewport but this div is actually 800px wide relative to your phones resolution.
Now pictures don't need this limitation. Whats the point in a high res display if your pictures only display 200px with a pixel density one fourth of your screens capability.
So a picture lives in a dual reality on your phone. It has a box size which is the size of the image relative to your viewport but the image itself inside the box lives within your resolution relative to your devices total screen pixels.
So when you have and image that's 200px in the viewport its display resolution is actually 800px. So when you put a picture that's only 200px and have it on a screen that does viewport scaling which nowadays is pretty much everything you're effectively stretching that image to four times its actual size. or what ever the screen pixel density ratio to viewport is. AKA it looks like crap.
And to answer your needs on this I'm just going to direct you here to MOZ who will go over the whys and how's as well as show you what to do to combat this.
Moz on Viewports
Combating element position is pretty easy you just use :
<meta name="viewport" content="width=device-width, initial-scale=1" />
In your <head>,
Moz on Image Scaling

FabricJS export relative to canvas

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.

Find actual screen resolution (not CSS pixels, real screen) with javascript

These days there's a big difference between pixels and points (CSS pixels, DIPS). On my particular computer its the same, but on retina macs and a lot of phones, there's 4 or 8 pixels per point. http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
That is, the “pixels” that are used in CSS declarations such as width: 300px or font-size: 14px,have nothing to do with the actual pixel density of the device, or even with the rumoured upcoming intermediate layer. They’re essentially an abstract construct created specifically for us web developers.
I want to get the screen resolution (the real screen resolution, you get it by now), and then serve an image scaled to maximally fill the screen. This means no need to get 2000x2000 pixels images on mobile devices, while still getting good resolutions on a large mac.
Hover, when using screen.height it returns CSS pixels not the screen resolution, meaning a retina mac will get an image that is half the size of the screen, resulting in pixelation. Any way to get the actual screen resolution, or the pixels-to-points ratio in javascript?
This will give you the actual screen height, regardless of pixel density which is altered by including the viewport tag...
screen.height * window.devicePixelRatio
Macs with retina renders pages in 2x scale, and so screen.height returns actual height divided by 2. See answers here

Can this be done in AS3?

I have 2 frames which i would like to switch between when rotating a mobile device. These two frames have similar content except that the content in frame one consists of text and graphics and that in frame two consists of audio and graphics.
The idea is to allow the user to read the text when the device is in the upright position and when they rotate the device, they get the similar content but with audio.
Any suggestions will be appreciated.
Have you looked into the StageOrientationEvent? You could catch Portrait/Landscape orientation there and switch frames based on what orientation, no?
Or continuously check the Stage Width/Height in onEnterFrame update and if height is bigger than width = Portrait, Else Landscape.

Resize video capture to canvas

I've looked at a number of similar questions, and tried implementing those solutions, but I'm still having the same problem, I believe primarily because I have an additional complication (and the fact that my understanding of image manipulation is limited).
Here's the situation: in a web app I have a webcam picture capture (using getUserMedia). The <video> element which displays the feed, as well as the <canvas> are sized to 640 pixel width as default. This works fine on desktop browsers.
On devices with screen width under 700px, the site responsively resizes everything, including the picture capture dialog, which resizes to 95% of the screen width, thus the <video> element display the camera feed is less than 640px in width most of the time (those are the times that matter here). The video feed displays fine, you can see the entire camera field. But every you take a picture, it gets displayed on the canvas (which resizes the same as the video feed) clipped, depending on the size of the screen. That is to say, the canvas displays as much of the original image, which remains 640px wide, as it can.
I don't want to resize the actual image; I'd like the uploaded data at the end of the day to be a 640px image regardless of the screen width. I just want the user to be able to see the whole thing before s/he saves it.
I've already tried playing with width attribute (element attribute, not CSS) on the canvas, but that did nothing, and changing the width of the video display will shrink the actual image, so that's not what I want.
I also played with the drawImage method which should resizing, but I couldn't quite get what I wanted. This is the line I thought should work, but still gives me a clipped image:
if($(window).width()<701){
var ratio = videoHeight/videoWidth;
var canvasWidth = $(window).width()*.86; // calculated width after CSS resizing
context.drawImage(video, 0, 0,width,height,0,0,canvasWidth,canvasWidth*ratio);
}
Update
The following code will show the entire picture on the canvas, but shrinks it, and I get a much smaller image file, depending on the screen width it was taken on:
context.drawImage(video, 0, 0,canvasWidth,canvasWidth*ratio);
Many thanks!

Categories