We Keep Coding

Shrink to fit a canvas in JavaScript/CSS

My simple question that I can't figure out is how to make a canvas in JavaScript a native width/height, then scale and center it.
I want to do this for my Three.js project (had to throw that in there just in case you can do this with Three.js), and I want to make it fair for other users with different screen sizes.
Here's what mine does now:
What I'm trying to say is that the canvas is always the window size.
I want to make it a native size (1440px * 900px), but scale to fit the window size (and center).
Here's what I want it to look like:
While the blue part is the canvas and the white space is the window.
The height should fit to the window, or if the width goes out of the window then the width should fit the window.
And last but not least I just need to center it. I can do this easily but I need help fitting the specific size and scaling.
This is what resizes it to the window size:
window.addEventListener("resize", onWindowResize);
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
weaponCamera.aspect = window.innerWidth / window.innerHeight;
weaponCamera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
weaponRenderer.setSize(window.innerWidth, window.innerHeight);
}
I have tried to follow this post, but that is for 2d canvases.
I made my own prototype by doing this:
let width = 1440;
let height = 900;
let scaleX = Math.max(window.innerWidth / width, window.innerHeight / height);
let scaleY = Math.min(window.innerWidth / width, window.innerHeight / height);
let scale = (scaleX + scaleY) / 2;
renderer.domElement.style.transform = "scale(" + scale + ")";
But this makes it too small and not really native-based size.

Did you try to use the object-fit css property to the canvas? Like so,
canvas { width:100vw; height:100vh; object-fit:contain; }

HTML Canvas coordinate systems and rendering process

I'm playing with drawing on html canvas and I'm little confused of how different coordinate systems actually works. What I have learned so far is that there are more coordinate systems:
canvas coordinate system
css coordinate system
physical (display) coordinate system
So when I draw a line using CanvasRenderingContext2D
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(3, 1);
ctx.lineTo(3, 5);
ctx.stroke();
before drawing pixels to the display, the path needs to be
scaled according to the ctx transformation matrix (if any)
scaled according to the ratio between css canvas element dimensions (canvas.style.width and canvas.style.height) and canvas drawing dimensions (canvas.width and canvas.height)
scaled according to the window.devicePixelRatio (hi-res displays)
Now when I want to draw a crisp line, I found that there are two things to fight with. The first one is that canvas uses antialiasing. So when I draw a line of thikness 1 at integer coordinates, it will be blurred.
To fix this, it needs to be shifted by 0.5 pixels
ctx.moveTo(3.5, 1);
ctx.lineTo(3.5, 5);
The second thing to consider is window.devicePixelRatio. It is used to map logical css pixels to physical pixels. The snadard way how to adapt canvas to hi-res devices is to scale to the ratio
const ratio = window.devicePixelRatio || 1;
const clientBoundingRectangle = canvas.getBoundingClientRect();
canvas.width = clientBoundingRectangle.width * ratio;
canvas.height = clientBoundingRectangle.height * ratio;
const ctx = canvas.getContext('2d');
ctx.scale(ratio, ratio);
My question is, how is the solution of the antialiasing problem related to the scaling for the hi-res displays?
Let's say my display is hi-res and window.devicePixelRatio is 2.0. When I apply context scaling to adapt canvas to the hi-res display and want to draw the line with thickness of 1, can I just ignore the context scale and draw
ctx.moveTo(3.5, 1);
ctx.lineTo(3.5, 5);
which is in this case effectively
ctx.moveTo(7, 2);
ctx.lineTo(7, 10);
or do I have to consider the scaling ratio and use something like
ctx.moveTo(3.75, 1);
ctx.lineTo(3.75, 5);
to get the crisp line?

Antialiasing can occur both in the rendering on the canvas bitmap buffer, at the time you draw to it, and at the time it's displayed on the monitor, by CSS.
The 0.5px offset for straight lines works only for line widths that are odd integers. As you hinted to, it's so that the stroke, that can only be aligned to the center of the path, and thus will spread inside and outside of the actual path by half the line width, falls on full pixel coordinates. For a comprehensive explanation, see this previous answer of mine.
Scaling the canvas buffer to the monitor's pixel ratio works because on high-res devices, multiple physical dots will be used to cover a single px area. This allows to have more details e.g in texts, or other vector graphics. However, for bitmaps this means the browser has to "pretend" it was bigger in the first place. For instance a 100x100 image, rendered on a 2x monitor will have to be rendered as if it was a 200x200 image to have the same size as on a 1x monitor. During that scaling, the browser may yet again use antialiasing, or another scaling algorithm to "create" the missing pixels.
By directly scaling up the canvas by the pixel ratio, and scaling it down through CSS, we end up with an original bitmap that's the size it will be rendered, and there is no need for CSS to scale anything anymore.
But now, your canvas context is scaled by this pixel ratio too, and if we go back to our straight lines, still assuming a 2x monitor, the 0.5px offset now actually becomes a 1px offset, which is useless. A lineWidth of 1 will actually generate a 2px stroke, which doesn't need any offset.
So no, don't ignore the scaling when offsetting your context for straight lines.
But the best is probably to not use that offset trick at all, and instead use rect() calls and fill() if you want your lines to fit perfectly on pixels.
const canvas = document.querySelector("canvas");
// devicePixelRatio may not be accurate, see below
setCanvasSize(canvas);
function draw() {
const dPR = devicePixelRatio;
const ctx = canvas.getContext("2d");
// scale() with weird zoom levels may produce antialiasing
// So one might prefer to do the scaling of all coords manually:
const lineWidth = Math.round(1 * dPR);
const cellSize = Math.round(10 * dPR);
for (let x = cellSize; x < canvas.width; x += cellSize) {
ctx.rect(x, 0, lineWidth, canvas.height);
}
for (let y = cellSize; y < canvas.height; y += cellSize) {
ctx.rect(0, y, canvas.width, lineWidth);
}
ctx.fill();
}
function setCanvasSize(canvas) {
// We resize the canvas bitmap based on the size of the viewport
// while respecting the actual dPR
// Thanks to gman for the reminder of how to suppport all early impl.
// https://stackoverflow.com/a/65435847/3702797
const observer = new ResizeObserver(([entry]) => {
let width;
let height;
const dPR = devicePixelRatio;
if (entry.devicePixelContentBoxSize) {
width = entry.devicePixelContentBoxSize[0].inlineSize;
height = entry.devicePixelContentBoxSize[0].blockSize;
} else if (entry.contentBoxSize) {
if ( entry.contentBoxSize[0]) {
width = entry.contentBoxSize[0].inlineSize * dPR;
height = entry.contentBoxSize[0].blockSize * dPR;
} else {
width = entry.contentBoxSize.inlineSize * dPR;
height = entry.contentBoxSize.blockSize * dPR;
}
} else {
width = entry.contentRect.width * dPR;
height = entry.contentRect.height * dPR;
}
canvas.width = width;
canvas.height = height;
canvas.style.width = (width / dPR) + 'px';
canvas.style.height = (height / dPR) + 'px';
// we need to redraw
draw();
});
// observe the scrollbox size changes
try {
observer.observe(canvas, { box: 'device-pixel-content-box' });
}
catch(err) {
observer.observe(canvas, { box: 'content-box' });
}
}
canvas { width: 300px; height: 150px; }
<canvas></canvas>

Preventing anti-aliasing requires that the pixels of the canvas, which is a raster image, are aligned with the pixels of the screen, which can be done by multiplying the canvas size by the devicePixelRatio, while using the CSS size to hold the canvas to its original size:
canvas.width = pixelSize * window.devicePixelRatio;
canvas.height = pixelSize * window.devicePixelRatio;
canvas.style.width = pixelSize + 'px';
canvas.style.height = pixelSize + 'px';
You can then use scale on the context, so that the drawn images won't be shrunk by higher devicePixelRatios. Here I am rounding so that lines can be crisp on ratios that are not whole numbers:
let roundedScale = Math.round(window.devicePixelRatio);
context.scale(roundedScale, roundedScale);
The example then draws a vertical line from the center top of one pixel to the center top of another:
context.moveTo(100.5, 10);
context.lineTo(100.5, 190);
One thing to keep in mind is zooming. If you zoom in on the example, it will become anti-aliased as the browser scales up the raster image. If you then click run on the example again, it will become crisp again (on most browsers). This is because most browsers update the devicePixelRatio to include any zooming. If you are rendering in an animation loop while they are zooming, the rounding could cause some flickering.

responsive canvas on window resize event

I am new one to canvas concept,I am trying to draw canvas using D3.js. I want to make canvas as responsive based on window screen size.
function onResize(){
var element = document.getElementsByTagName("canvas")[0];
var context = element .node().getContext("2d");
var scrnWid = window.innerWidth,
scrnHgt = window.innerHeight,
elementHgt = element.height,
elementWid = element.width;
var aspWid = elementWid/scrnWid;
var aspHig = elementHgt/scrnHgt;
context.scale(aspWid,aspHig);
}
window.addEventListener("resize",onResize);
This is the code I used to resize canvas, but it not working.I don't want to use any library except D3.js. Can anyone suggest me better solution ?

2DContext.scale() changes rendered content not display size / resolution
You are not changing the canvas size, all you are doing is scaling the content of the canvas.
You can set the page size of the canvas via its style properties
canvas.style.width = ?; // a valid CSS unit
canvas.style.height = ?; // a valid CSS unit
This does not affect the resolution (number of pixels) of the canvas. The canvas resolution is set via its width and height properties and is always in pixels. These are abstract pixels that are not directly related to actual device display pixels nor do they directly relate to CSS pixels (px). The width and height are numbers without a CSS unit postfix
canvas.width = ?; // number of pixel columns
canvas.height = ?; // number of pixel rows
Setting the 2D context scale has no effect on the display size or the display resolution, context.scale(?,?) only affects the rendered content
To scale a canvas to fit a page
const layout = { // defines canvas layout in terms of fractions of window inner size
width : 0.5,
height : 0.5,
}
function resize(){
// set the canvas resolution to CSS pixels (innerWidth and Height are in CSS pixels)
canvas.width = (innerWidth * layout.width) | 0; // floor with |0
canvas.height = (innerHeight * layout.height) | 0;
// match the display size to the resolution set above
canvas.style.width = canvas.width + "px";
canvas.style.height = canvas.height + "px";
}

CSS & Fabric js: Scale canvas and objects on small resolutions

I am working with fabricjs for an application. On mobile I need to scale the whole canvas down so it can fit the screen.
The issue is that on the canvas there are 10 objects in total, between images, texts and fabric js background objects.
I tried scaling the whole canvas using CSS transform and it seems to work, but the whole area gets smaller, as in this picture
The original canvas is the entire picture, but when I apply the transform, the canvas becomes the red area, and when moving objects with fabricjs, they get clipped when outside the red area.
Is there any way to fix this in CSS ?
edit
Basically I need to scale everything inside the canvas, but the canvas itself needs to always be 100% in height and with of the current window.
Or is there any way to resize the whole canvas with all the objects ? I also tried fabric js setZoom() method, but it gets even more messed up.
Thank you

The best way is find a scale ratio that fit your screen (is unclear how you plan to fit a square canvas on a long screen).
Then leave the css untrasformed. ratio is the scale ratio that fit the canvas in screen;
resize the canvas to actual screen dimensions:
canvas.setDimensions({ width: originalWidth * ratio, height: originalHeight * ratio });
canvas.setZoom(ratio)
This should give you a smaller canvas with everything in place.

Possible Duplicate: Scale fabric.js canvas objects
It seems Fabric.js doesn't support this natively... at least, I haven't found the options to do it.
Until Fabric.js provides this, the best way may be to iterate through the objects and scale them manually to match the new screen size based on the ratio of the previous screen size. For example...
const canvas = new fabric.Canvas({});
let prevScreenWidth = window.innerWidth;
let prevScreenHeight = window.innerHeight;
window.addEventListener('resize', handleResize());
/*********************************************************
* Get the new screen size ratio in relation to the previous screen size
* to determine the scale factor.
*********************************************************/
function handleResize() {
// Error Handling: Make sure the scale ratio denominator is defined.
prevScreenWidth = prevScreenWidth || window.innerWidth;
prevScreenHeight = prevScreenHeight || window.innerHeight;
// Get the current/new screen width and height (scale ratio numerator).
const currScreenWidth = window.innerWidth;
const currScreenHeight = window.innerHeight;
// Determine width and height scale ratios
const widthRatio = currScreenWidth / prevScreenWidth;
const heightRatio = currScreenHeight / prevScreenHidth;
// Get the average of the width and height scale ratios
const scaleFactor = (widthRatio + heightRatio) / 2;
// Scale the objects with the screen size adjustment ratio average as the scale factor
scaleObjects(scaleFactor);
// Record the current screen sizes to be used for the next resize.
prevScreenWidth = window.innerWidth;
prevScreenHeight = window.innerHeight;
}
/*********************************************************
* Iterate through each object and apply the same scale factor to each one.
*********************************************************/
function scaleObjects(factor) {
// Set canvas dimensions (this could be skipped if canvas resizes based on CSS).
canvas.setDimensions({
width: canvas.getWidth() * factor,
height: canvas.getHeight() * factor
});
if (canvas.backgroundImage) {
// Need to scale background images as well
const bi = canvas.backgroundImage;
bi.width = bi.width * factor; bi.height = bi.height * factor;
}
const objects = canvas.getObjects();
for (let i in objects) {
const scaleX = objects[i].scaleX;
const scaleY = objects[i].scaleY;
const left = objects[i].left;
const top = objects[i].top;
const tempScaleX = scaleX * factor;
const tempScaleY = scaleY * factor;
const tempLeft = left * factor;
const tempTop = top * factor;
objects[i].scaleX = tempScaleX;
objects[i].scaleY = tempScaleY;
objects[i].left = tempLeft;
objects[i].top = tempTop;
objects[i].setCoords();
}
canvas.renderAll();
canvas.calcOffset();
}
See this previous answer for more information on the scaleObjects() method... Scale fabric.js canvas objects

Canvas grid gets blurry at different zoom levels

I am trying to create a simple canvas grid which will fit itself to the player's current zoom level, but also to a certain canvas height/width proportional screen limit. Here is what I got so far:
JS:
var bw = window.innerWidth / 2; //canvas size before padding
var bh = window.innerHeight / 1.3; //canvas size before padding
//padding around grid, h and w
var pW = 30;
var pH = 2;
var lLimit = 0; //9 line limit for both height and width to create 8x8
//size of canvas - it will consist the padding around the grid from all sides + the grid itself. it's a total sum
var cw = bw + pW;
var ch = bh + pH;
var canvas = $('<canvas/>').attr({width: cw, height: ch}).appendTo('body');
var context = canvas.get(0).getContext("2d");
function drawBoard(){
for (var x = 0; lLimit <= 8; x += bw / 8) { //handling the height grid
context.moveTo(x, 0);
context.lineTo(x, bh);
lLimit++;
}
for (var x = 0; lLimit <= 17; x += bh / 8) { //handling the width grid
context.moveTo(0, x); //begin the line at this cord
context.lineTo(bw, x); //end the line at this cord
lLimit++;
}
//context.lineWidth = 0.5; what should I put here?
context.strokeStyle = "black";
context.stroke();
}
drawBoard();
Now, I succeeded at making the canvas to be at the same proportional level for each screen resolution zoom level. this is part of what I am trying to achieve. I also try to achieve thin lines, which will look the same at all different zooming levels, and of course to remove the blurriness. right now the thickness
of the lines change according to the zooming levels and are sometimes blurry.
Here is jsFiddle (although the jsFiddle window itself is small so you will barely notice the difference):
https://jsfiddle.net/wL60jo5n/
Help will be greatly appreciated.

To prevent blur, you should account for window.devicePixelRatio when setting dimensions of your canvas element (and account for that dimensions during subsequent drawing, of course).
width and height properties of your canvas element should contain values that are proportionally higher than values in CSS properties of the same names. This can be expressed e.g. as the following function:
function setCanvasSize(canvas, width, height) {
var ratio = window.devicePixelRatio,
style = canvas.style;
style.width = '' + (width / ratio) + 'px';
style.height = '' + (height / ratio) + 'px';
canvas.width = width;
canvas.height = height;
}

To remove blurry effect on canvas zoom/scale i used image-rendering: pixelated in css

The problem is that you are using decimal values to draw. Both the canvas width and the position increments in your drawBoard() loop use fractions. The canvas is a bitmap surface, not a vectorial drawing. When you set the width and height of the canvas, you set the actual number of pixels stored in memory. That value cannot be decimal (browsers will probably just trim the decimal part). When you try to draw at decimal positions, the canvas will use pixel interpolation to avoid aliasing, hence the occasional blur.
See a version where I round x before drawing:
https://jsfiddle.net/hts7yybm/
Try rounding the values just before you draw them, but not in your actual logic. That way, the imprecision won't stack as the algorithm keeps adding to the value.
function drawBoard(){
for (var x = 0; lLimit <= 8; x += bw / 8) {
var roundedX = Math.round(x);
context.moveTo(roundedX, 0);
context.lineTo(roundedX, bh);
lLimit++;
}
for (var x = 0; lLimit <= 17; x += bh / 8) {
var roundedX = Math.round(x);
context.moveTo(0, roundedX);
context.lineTo(bw, roundedX);
lLimit++;
}
context.lineWidth = 1; // never use decimals
context.strokeStyle = "black";
context.stroke();
}
EDIT: I'm pretty sure all browsers behave as if the canvas was an img element, so there's no way to prevent aliasing when the user zooms with their browser's zoom function, other than with prefixed css. And even then, I'm not sure the browsers's zoom feature takes that into account.
canvas {
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;
}
Also, make sure the canvas doesn't have any CSS-set dimensions. That only stretches the image after it's been drawn instead of increasing the drawing surface. If you want to fill a block with the canvas by giving it 100% width and height, then you need some JS to compute the CSS-given height and width and set the value of the canvas's width and height property based on that. Then you can make your own implementation of a zoom function within your canvas drawing code, but depending on what you're doing it might be overkill.