I'm developing a drawing app, and I've encountered a problem which I have been trying to solve but I haven't found a reliable solution yet:
Sketches have an original resolution of 1280 x 720, and I would like to resize the canvas when the page is opened to the maximum size possible (given the screen dimensions minus a toolbar I have put on the upper side of the page) keeping the 1280 x 720 aspect ratio.
The canvas needs to be centered in the screen and black stripes will cover the rest: when the the browser window dimensions relation is less than the sketch original w/h relation there will be horizontal black stripes (fig 1), and when it is bigger, vertical black stripes (fig 2).
I've tried using javascript applying to the canvas the offsetWidth and offsetHeight of a div containing an auxiliar invisible image which I generate programatically with the original sketch dimensions, but doesn't seem to be a robust way to do this. Most of the time the offset properties aren't ready when the page is loaded and I have to wait for them using a timer (or mutation observers).
Some images of what I'm trying to do:
I've spend much time on this little thing and is driving me crazy, because every solution I found is way too hacky or unreliable. Any help will be very appreciated.
I'm using Angular + Ionic 4.
If I'm understanding you correctly, you want to dynamically change the size of your canvas based on how big the window is. The one stipulation is that it must maintain the 1280 x 720 (1:0.5625) ratio.
I'm going to attempt to provide a solution that will also listen for resizing of the window after it's been loaded. Keep in mind that this means you'll need to redraw everything on the canvas from there.
HTML
<body>
<canvas id="canvas"></canvas>
</body>
CSS
body {
background-color: black;
}
JavaScript:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
startListening();
function startListening() {
// resize the canvas every time the window is adjusted
window.addEventListener('resize', resizeCanvas, false);
// manually call the resizeCanvas() function as the window loads with it's starting dimensions (before a resize has happened)
resizeCanvas();
}
function resizeCanvas() {
// if the canvas height isn't maxed out, match it to the width of the page at the correct aspect ration (1:0.5625)
if(canvas.height < window.innerHeight){
canvas.width = window.innerWidth;
canvas.height = canvas.width * 0.5625;
}
// if the canvas height is maxed out, stop widening the canvas and lock the canvas height at 0.5625 of that locked height
if(canvas.height >= window.innerHeight){
canvas.height = canvas.width * 0.5625;
}
// lastly, if we are shrinking the width back down, readjust both the width and height to match
if(canvas.width > window.innerWidth){
canvas.width = window.innerWidth;
canvas.height = canvas.width * 0.5625;
}
// redraw the canvas with our newly calculated dimensions
redraw();
}
function redraw() {
ctx.fillStyle = "#FF0000";
// Draw the canvas in the center of the screen at the height and width calculated above in the resizeCanvas() function
ctx.fillRect((window.innerWidth - canvas.width) / 2, (window.innerHeight - canvas.height) / 2, canvas.width, canvas.height);
}
Related
I am trying to build a game using HTML5 canvas.
The canvas takes the full width and height of the browser.
canvas.height = innerHeight;
canvas.width = innerWidth;
How can I make the elements inside the canvas, like player, obstacles etc. responsive?
I know doing something like
addEventListener("resize", () => {
canvas.width = innerWidth;
canvas.height = innerHeight - 100;
});
will make the canvas responsive. But what about the elements drawn to the canvas?
One approach is to use two canvases:
The onscreen canvas, which you make responsive by setting its width and height to the viewport width and height (as you do in your resize event listener)
A second canvas element which you create using Javascript. This will have width and height dimensions that will never change (say 600px by 400px), which means you can render your game elements onto it with confidence.
Render the game on this second canvas and then, at the end of each RequestAnimationFrame cycle, copy it onto the first canvas using the ctx.drawImage() function. At this point you can do calculations to get the whole of your second canvas to fit into the first canvas leaving gaps either at the top/bottom, or on the left/right edges.
As a bonus, this will also allow your users to zoom/pan across your second canvas - if your game calls for that sort of thing.
Method 1
This is if you’d like the pixels to scale as well (like with pixel art)
If you want the drawings to scale as well, then change the canvas’s css height and width values, not the width and height attributes. Like this:
canvas.style.height = innerHeight + ‘px’;
canvas.style.width = innerWidth + ‘px’;
This will scale all the drawings as well.
However, using this alone, all drawings will be scaled using interpolation, giving a fuzzy look. To prevent that, add this:
canvas {
image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: -o-crisp-edges;
image-rendering: pixelated;
-ms-interpolation-mode: nearest-neighbor;
}
This will make the browser scale it using nearest-neighbor instead.
Method 2
This method will scale all of the drawings, but will not scale pixels, and will not make it look too pixely nor fuzzy.
Like you originally did, set the width and height attributes of the canvas:
canvas.height = innerHeight;
canvas.width = innerWidth;
But create variables representing how much the canvas was scaled:
var scaleW = newWidth / oldWidth;
var scaleH = newHeight / oldHeight;
Then, add these to your drawing so you don’t have to manually scale every value:
ctx.save(); // saves the ctx
ctx.scale(scaleW, scaleH); // scales the drawings
// all your drawing ...
ctx.restore(); // restores the ctx, removing the scale
Sorry if the first didn’t work, hopefully the second should.
This question already has answers here:
Size of HTML5 Canvas via CSS versus element attributes
(3 answers)
Closed 3 years ago.
im currently working on a HTML/Javascript Project where i am using a HTML Canvas and the Context2D for drawing.
More or less i'm drawing a part of a 2d world with no fixed tile size.
let width = canvas.width;
let height = canvas.height;
let cellHeight = height/rows * viewSizeMultiplier.y,cellWidth = width/columns * viewSizeMultiplier.x;
The viewSizeMultiplier is like 1/8 for 8 Tiles on the Map. I've struggeld alot by getting a specific Tile when clicking on the Canvas because the canvas.size does not adjust itself by resizing the window.
.canvas {
width: 60%;
height: 80%;
left:5%;
top:10%;
}
That's the way i implemented my canvas in css. For getting the current Tile on my screen i had to calculate the aspect ratio of the diffrent sizes like that:
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect(),
scaleX = canvas.width / rect.width,
scaleY = canvas.height / rect.height;
return {
x: (evt.clientX - rect.left) * scaleX,
y: (evt.clientY - rect.top) * scaleY
}
}
So my question is why are there 2 diffrent Sizes of the Canvas? If it uses the canvas.size Size does it adjusts its resolution?
Added Snippet :
let canvas = document.getElementsByClassName('canvas')[0];
const canvasWidth= canvas.width;
const actualWidth =canvas.getBoundingClientRect().width;
console.log(canvasWidth,actualWidth);//300 , 522
The CSS styling won't change the pixel dimensions of the canvas after it's first been created. You need to specifically set canvas.width and canvas.height to new dimensions to change the pixel size of the canvas, otherwise you'll end up with nothing more than the original width * height pixels scaled to different sizes.
You'll need to listen for resize events to know when to change the dimensions of the canvas.
Well, the canvas' inner dimensions can be different from the canvas DOM element's dimensions.
canvas.width gives you the canvas inner width, while rect.width only gives you the canvas DOM element's outer width, excluding any portion of the canvas that is drawn beyond the outer width, and that needs scrolling to reach. The same applies for height.
So, in short, whenever you need to scroll to see all your content in a canvas, this implies that your canvas' inner dimensions is larger than its outer dimensions.
I have a canvas that is stretched out since I am making a sandbox game. I can not use the normal method of detecting the pixel on the page a canvas is clicked because I need to know which stretch pixel was clicked. Hopefully this makes sense?
All you have to do is scale the position based on your current canvas size and original canvas size.
function scaleCursorPoint(int mouseX, int mouseY, ctx) {
return {
x: mouseX * (ctx.canvas.width / ctx.width),
y: mouseY * (ctx.canvas.height / ctx.height)
};
}
ctx (which is gotten with canvas.getContext('2d') has the width of the original unstretched. ctx.canvas gets the original canvas DOM element. ctx.canvas.width is the size of the DOM element (the stretched size).
Divide the two and you get the scale value. Then just multiple that scale value with the points you got and you're good
I am making for school a star catching game.
I want the enviroment to change dynamicly so that when i resize browser windows the game will resize with it.
I got the following running code:
http://jsfiddle.net/xigolle/yA74f/
The only problem with that is that the mouse isn't center on the witch.
What is the best way for me to get the mouse on the center on every size?
The problem lays for sure in this part:
ctx.drawImage(img, this.x, this.y, canvas.width/10, canvas.height/10);
The size of the browser window i get from a event listener who activates when i resize.
And the value is put in canvas.width and canvas.height.
I hope you guys can help me :)
For any more question or unclearance please ask :)
You have two problems
The first is your use of drawImage
ctx.drawImage(img, this.x, this.y, canvas.width/10, canvas.height/10);
This is going to rescale the witch image in a way that does not keep the proportions, which is why when resizing the window the witch either squishes or expands
You should resize the image based on a ratio of the original image size and original canvas size. Then use that ratio times the new canvas size to get the right image size.
//Original canvas width/height
var initialWidth = 500, initialHeight = 500;
var initialImgWidth = 120, initialImgHeight = 65;
var wRatio = initialImgWidth/initialWidth, hRatio = initialImgHeight/initialHeight;
...
ctx.drawImage(img, this.x, this.y, canvas.width*wRatio, canvas.height*hRatio);
Now that we have the image resize resolved now we can center the image on the mouse
Now to center you have to take the mouse x/y and minus each with 1/2 of width/height of the rescaled witch respectively
Witch.x = event.pageX-((canvas.width*wRatio)/2);
Witch.y = event.pageY-((canvas.height*hRatio)/2);
JSFiddle
EDIT
My rescale calculations were wrong, for now to scale the image for now just scale it by its original dimensions
var imgWScale = initialImgWidth/2;
var imgHScale = initialImgHeight/2;
...
ctx.drawImage(img, this.x, this.y, imgWScale,imgHScale);
...
Witch.x = event.pageX-(imgWScale/2);
Witch.y = event.pageY-(imgHScale/2);
Just remember to center just get the images width/height and divide in half and then take that from the mouse coordinates.
Let's put some text on a HTML5 <canvas> with
var canvas = document.getElementById('myCanvas'),
ctx = canvas.getContext('2d'),
ctx.textBaseline = 'top';
ctx.textAlign = 'left';
ctx.font = '14px sans-serif';
ctx.fillText('Bonjour', 10, 10);
When zooming the canvas on text, one can see pixelation.
Is there a way of zooming on a canvas without having pixelation on text ?
When you fillText on the canvas, it stops being letters and starts being a letter-shaped collection of pixels. When you zoom in on it, the pixels become bigger. That's how a canvas works.
When you want the text to scale as a vector-based font and not as pixels, don't draw them on the canvas. You could create <span> HTML elements instead and place them on top of the canvas using CSS positioning. That way the rendering engine will render the fonts in a higher resolution when you zoom in and they will stay sharp. But anything you draw on the canvas will zoom accordingly.
Alternatively, you could override the browsers zoom feature and create your own zooming algorithm, but this will be some work.
When the user zooms in or out of the window, the window.onresize event handler is triggered. You can use this trigger to adjust the width and the height of the canvas css styling accordingly (not the properties of the canvas. That's the internal rendering resolution. Change the width and height attributes of the style which is the resolution it is scaled to on the website).
Now you effectively disabled the users web browser from resizing the canvas, and also have a place where you can react on the scaling input events. You can use this to adjust the context.scale of your canvas to change the size of everything you draw, including fonts.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<script type="application/javascript">
"use strict"
var canvas;
var context;
function redraw() {
// clears the canvas and draws a text label
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.font = "60pt sans-serif";
context.fillText("Hello World!", 100, 100);
}
function adjustSize() {
var width = window.innerWidth;
var height = window.innerHeight;
// resize the canvas to fill the whole screen
var style = canvas.style;
style.width = width + "px";
style.height = height + "px";
// backup the old current scaling factor
context.save();
// change the scaling according to the new zoom factor
context.scale(1000 / width, 1000 / height);
// redraw the canvas
redraw();
// restore the original scaling (important because multiple calls to scale are relative to the current scale factor)
context.restore();
}
window.onload = function() {
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
adjustSize();
}
window.onresize = adjustSize;
</script>
</head>
<body>
<canvas id ="myCanvas" width = 1000 height = 1000 ></canvas>
</body>
</html>
If you only need to scale text you can simply scale the font size.
A couple of notes on that however: fonts, or typefaces, are not just straight forward to scale meaning you will not get a smooth progress. This is because fonts are often optimized for certain sizes so the sizes in between so to speak are a result of the previous and next size. This can make the font look like it's moving around a little when scaled up and is normal and expected.
The approach here uses a simply size scale. If you need an absolute smooth scale for animation purposes you will have to use a very different technique.
The simple way is:
ctx.font = (fontSize * scale).toFixed(0) + 'px sans-serif';
An online demo here.
For animation purposes you would need to do the following:
Render a bigger size to an off-screen canvas which is then used to draw the different sizes
When the difference is too big and you get problems with interpolation you will have to render several of these cached text images at key sizes so you can switch between them when scaling factor exceeds a certain threshold.
In this demo you can see that at small sizes the pixels gets a bit "clumpy" but otherwise is much smoother than a pure text approach.
This is because the browser uses bi-linear interpolation rather than bi-cubic with canvas (this may or may not change in the future) so it's not able to interpolate properly when the difference gets to big (see below for solution with this issue).
The opposite happens at big sizes as the text gets blurry also due to interpolation.
This is where we would have to switch to a smaller (or bigger) cached version which we then scale within a certain range before we again switch.
The demo is simplified to show only a single cached version. You can see halfway through that this works fine. The principle would be in a full solution (sizes being just examples):
(Update Here is a demo of a switched image during scale).
-- Cached image (100px)
-- Draw cached image above scaled based on zoom between 51-100 pixels
-- Cached image (50px) generated from 100px version / 2
-- Draw cached image above scaled based on zoom between 26-50 pixels
-- Cached image (25px) generated from 50px version / 2
-- Draw cached image above scaled based on zoom between 1-25 pixels
Then use a "sweet spot" (which you find by experiment a little) to toggle between the cached versions before drawing them to screen.
var ctx = canvas.getContext('2d'),
scale = 1, /// initial scale
initialFactor = 6, /// fixed reduction scale of cached image
sweetSpot = 1, /// threshold to switch the cached images
/// create two off-screen canvases
ocanvas = document.createElement('canvas'),
octx = ocanvas.getContext('2d'),
ocanvas2 = document.createElement('canvas'),
octx2 = ocanvas2.getContext('2d');
ocanvas.width = 800;
ocanvas.height = 150;
ocanvas2.width = 400; /// 50% here, but maybe 75% in your case
ocanvas2.height = 75; /// experiment to find ideal size..
/// draw a big version of text to first off-screen canvas
octx.textBaseline = 'top';
octx.font = '140px sans-serif';
octx.fillText('Cached text on canvas', 10, 10);
/// draw a reduced version of that to second (50%)
octx2.drawImage(ocanvas, 0, 0, 400, 75);
Now we only need to check the sweet spot value to find out when to switch between these versions:
function draw() {
/// calc dimensions
var w = ocanvas.width / initialFactor * scale,
h = ocanvas.height / initialFactor * scale;
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (scale >= sweetSpot) {
ctx.drawImage(ocanvas, 10, 10, w, h); /// use cached image 1
} else {
ctx.drawImage(ocanvas2, 10, 10, w, h); /// use cached image 2
}
}
So why not just draw the second cached image with a font? You can do that but then you are back to the issue with fonts being optimized for certain sizes and it would generate a small jump when scaling. If you can live with that then use this as it will provide a little better quality (specially at small sizes). If you need smooth animation you will have to reduce a larger cached version in order to keep the size 100% proportional.
You can see this answer on how to get a large image resized without interpolation problems.
Hope this helps.